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視口的高度，所以它的高度與瀏覽器窗口一樣高，不管父元素如何。 –