Question

我只是想在div中使用'cover'size属性设置背景图像。无论如何，图像始终在div内以全尺寸呈现。无论我设置的背景大小是什么，都无效。

我对SO提出了所有类似的答案，但到目前为止没有任何帮助。

我想念什么？

#page {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  display: block;
  /*padding: 40px 40px 50px 40px;
  position: relative;*/
  z-index: 0;
}
.status {
  position: absolute;
  text-indent: -5000px;
  width: 150px;
  height: 61px;
}

.Paid {
  background-image: url(<?php echo base\_url();?>assets/blueline/img/status-paid.png);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


<div id="page">
  <div class="status Paid">
  </div>

Answer 1

#page {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  margin-top: 0px;
  display: block;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}
.status {
position: absolute;
text-indent: -5000px;
width: 150px;
height: 61px;
}
.Paid {
background-image: url("https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._SX425_.jpg");
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}

<div id="page">
<div class="status Paid"></div>
</div>

关于您的背景为何无法正常工作可能有两个原因。您没有完全指定不起作用的地方，但是这是我的建议：

1。您的图片位置可能不正确 检查您的控制台，看是否存在404错误的文件路径背景图片，我不太清楚您代码中的确切问题，但是看一下您的控制台，看看。可能是您的图片位置。

2。删除背景位置：居中 对此进行注释，然后再次检查，因为将图像居中于该图像将覆盖的div标签中是没有用的。因此，请尝试将其删除。

3。将背景尺寸更改为100％100％ 就我个人而言，我只是在玩背景尺寸游戏，而100％100％为我工作。试一试，它应该可以工作。

我希望这会有所帮助，如果您需要任何澄清，请随时发表评论:)。

我附上了一个有效的例子。

Answer 2

width和height错误，请尝试使用

.status {
  position: absolute;
  text-indent: -5000px;
  width: 172px;
  height: 51px;
}

但是，为什么不只使用文本和边框呢？

背景尺寸不起作用。如何解决明显的问题？

2 个答案: