html - 背景大小不起作用。我该如何解决明显的问题？

Question

我只是想在具有“封面”大小属性的 div 中放置一个背景图像。无论如何，图像总是在 div 中以全尺寸呈现。 无论我在 background-size 中设置什么，都不起作用。

我已经在 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% 对我有用。试一试，它应该会起作用。

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

我附上了一个工作示例。