Question

我是html和css的新手，我对此代码有疑问。基本上我/我想要做的是在每个部分的背面放置一个背景图像（图像应完全适合该部分）。有了这种代码什么都没发生，我可以把颜色改成te部分。路径图像中没有错误，所以我有点困惑。

＆＃13;

#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%;
}

＆＃13;

<!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>

＆＃13;

Answer 1

背景图片网址存在问题。当你说

background-image: url('asset/background1.png');

您告诉浏览器无论css文件在哪里，这都是它的相对路径。假设css文件名是：

myclasses.css

根据你的说法，包含文件夹应如下所示：

myclasses.css - ＆gt;你的css文件
资产 - ＆gt;夹

现在“asset”文件夹必须包含background1.png。

Answer 2

最重要的错误是你的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>

Answer 3

我的图像也遇到了这个问题，所以我做的是将img和css文件放在同一个资源文件夹中。然后在html上链接css只需写＆＃34;＆＃34;。对于css上的背景图像，只需编写＆＃34; background-image：your-image.png＆＃34;。这就是我为管理它而做的。并且为了使图像完美地适合部分使用＆＃34;背景尺寸：覆盖＆＃34;在每个部分。

后台CSS属性似乎无法正常工作

3 个答案: