后台 CSS 属性 似乎无法正常工作
Background CSS property doesn't seem to work correctly
我是 html 和 css 的新手，我遇到了有关此代码的问题。
基本上 I/m 试图做的是在每个部分的后面放置一个背景图像（图像应该完全适合该部分）。使用这种代码没有任何反应，我可以将颜色更改为 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>
最重要的错误是 CSS 中的 } 大括号直接位于 back1 的规则之前。删除那个：
#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(http://placehold.it/600x450/cf9?text=back1);
}
#back2 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/9fc?text=back2);
}
#back3 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/fc9?text=back3);
}
.onepage {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
.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%;
}
<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>
背景图片有问题 url。当你说
background-image: url('asset/background1.png');
您告诉浏览器 css 文件所在的位置，这是它的相对路径。假设 css 文件名为：
- myclasses.css
根据您所说的，包含的文件夹应该如下所示：
- myclasses.css --> 你的 css 文件
- 资产 --> 文件夹
现在 "asset" 文件夹必须包含 background1.png。
我也遇到了图像问题，所以我将 img 和 css 文件放在同一个资产文件夹中。然后在 link css 上 html 只需写“”。对于 css 上的背景图像，只需写 "background-image: your-image.png"。这就是我为管理它所做的。为了使图像完全适合该部分，请在每个部分使用 "background-size: cover"。
我是 html 和 css 的新手，我遇到了有关此代码的问题。 基本上 I/m 试图做的是在每个部分的后面放置一个背景图像（图像应该完全适合该部分）。使用这种代码没有任何反应，我可以将颜色更改为 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>
最重要的错误是 CSS 中的 } 大括号直接位于 back1 的规则之前。删除那个：
#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(http://placehold.it/600x450/cf9?text=back1);
}
#back2 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/9fc?text=back2);
}
#back3 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/fc9?text=back3);
}
.onepage {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
.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%;
}
<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>
背景图片有问题 url。当你说
background-image: url('asset/background1.png');
您告诉浏览器 css 文件所在的位置，这是它的相对路径。假设 css 文件名为：
- myclasses.css
根据您所说的，包含的文件夹应该如下所示：
- myclasses.css --> 你的 css 文件
- 资产 --> 文件夹
现在 "asset" 文件夹必须包含 background1.png。
我也遇到了图像问题，所以我将 img 和 css 文件放在同一个资产文件夹中。然后在 link css 上 html 只需写“”。对于 css 上的背景图像，只需写 "background-image: your-image.png"。这就是我为管理它所做的。为了使图像完全适合该部分，请在每个部分使用 "background-size: cover"。