我是 html 和 css 的新手，我遇到了关于这段代码的问题。 基本上我/我想做的是在每个部分的后面放置一个背景图像(图像应该完全适合该部分)。使用这种代码没有任何反应，我可以将颜色更改为 te 部分。路径图像中没有错误，所以我有点困惑。
#logo {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
}
#logo1 {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
z-index: 3;
}
header {
z-index: 2;
}
html {
height: 100%;
}
h1 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 2em;
text-align: center;
margin-top: 0px;
z-index: 1
}
h2 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 1em;
text-align: center;
margin: -15px;
}
h3 {
font-family: "ChicagoFLF", sans-serif;
font-size: 1em;
text-align: center;
margin: -15px;
text-decoration: none;
}
}
#back1 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
#back2 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
#back3 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
.onepage {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
q
}
.more {
display: block;
position: relative;
bottom: 1000px;
top: 0;
left: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#push {
position: absolute;
bottom: 130px;
margin: 0 auto;
left: 47%;
}
#pushtext {
position: absolute;
bottom: 100px;
margin: 0 auto;
left: 46%;
}
#pushtext1 {
position: absolute;
bottom: 150px;
margin: 0 auto;
left: 46%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/onepage.css" />
<script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/onepage.js"></script>
<title>One Page</title>
</head>
<body>
<header>
<div id="logo"><img id="logo1" src="asset/logoblack.png" alt=""></div>
<h1>
Andrea Lovati
</h1>
<h2>
some text
</h2>
</header>
<!--first section-->
<section class="onepage" id="back1">
<div id="pushtext">
<a href="#second">
<h3>discover more</h3>
</a>
</div>
<div id="push"><img src="asset/push.png"></div>
</section>
<!--second section-->
<div id="back2">
</div>
<!--third section-->
<section id="back3">
</section>
</body>
</html>最佳答案
背景图像 URL 存在问题。当你说
background-image: url('asset/background1.png');
你告诉浏览器 css 文件在哪里，这是它的相对路径。假设 css 文件名为:
- 我的类.css
根据你所说的，包含的文件夹应该是这样的:
- myclasses.css --> 你的 css 文件
- Assets --> 文件夹
现在“ Assets ”文件夹必须包含 background1.png。
关于html - 背景 CSS 属性似乎无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42767885/