Question

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

＆＃13;

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

＆＃13;

<body>
  <div class="front-page">
  </div>
</body>

＆＃13;

Answer 1

三个问题：

您的div没有高度/填充，这意味着它呈现高度为0px。这意味着您的div不可见，因此背景无法显示。
display: 100%;无效 - 不确定这是做什么的。
background速记语法在大小和位置之间需要/。

＆＃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;

Answer 2

如果您将position和size放在单独的一行并且在某个高度上，它可以正常运行:)（并且当然会删除display: 100%）

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

＆＃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;

Answer 3

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;
  ...
}

无法为div添加图像背景

3 个答案: