无法为div添加图像背景

时间:2017-05-16 19:39:07

标签: html css

我正在尝试将一个背景图片添加到div中,但它不起作用,请你帮助我!



html body {
  height: 100%;
}

.front-page {
  display: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: url("classroom.jpg") no-repeat center cover;
}

<body>
  <div class="front-page">
  </div>
</body>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

三个问题:

  1. 您的div没有高度/填充,这意味着它呈现高度为0px。这意味着您的div不可见,因此背景无法显示。

  2. display: 100%;无效 - 不确定这是做什么的。

  3. background速记语法在大小和位置之间需要/

  4. &#13;
    &#13;
    .front-page {
      height: 300px;
      width: 100%;
      border: 0;
      background: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg") no-repeat center/cover;
    }
    &#13;
    <div class="front-page">
    </div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

如果您将positionsize放在单独的一行并且在某个高度上,它可以正常运行:)(并且当然会删除display: 100%

如果您喜欢单行,@ avril是正确的。

&#13;
&#13;
.front-page {
  width: 300px;
  height: 200px;
  background: url('https://i.ytimg.com/vi/sS2JdeMNoRc/0.jpg') no-repeat;
  background-position: center;
  background-size: cover;
}
&#13;
<body>
  <div class="front-page">
  </div>
</body>
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

CSS语法

  

background:bg-color bg-image position / bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;

cover属性是问题display: 100%;无效。

.front-page {
  ...
  height: 100%;
  background: url(classroom.jpg) center/cover no-repeat;
  ...
}

.front-page {
  ...
  height: 100%;
  background: url("classroom.jpg") no-repeat center;
  background-size: cover;
  ...
}