0
我是一个新手在HTML和CSS，我有这个代码的问题。 基本上，我试图做的是在每个部分的背面放置背景图像（图像应完全适合该部分）。有了这种类型的代码什么都没有发生，我可以将颜色更改为te部分。路径图中没有错误，所以我有点困惑。背景CSS属性似乎不能正常工作
#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>
背景图像需要相对于css文件（如果这些样式在onepage.css中），所以我猜你的路径应该是'../ asset/background1.png'（除非你的资产文件夹在css文件夹中） – Pete
您的HTML和CSS就像这个代码一样在同一页上？ – Nemus
如果图像在正确的位置，而你仍然没有看到它们，那么它可能就是100％的高度。无法正常工作，请尝试更换高度：100vh;这意味着100视口的高度，所以它的高度与浏览器窗口一样高，不管父元素如何。 –