CSS背景位置不工作？

我有下面的代码，我正试图添加一个属性来居中背景，但它不起作用

现行守则：

<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>

我尝试添加的CSS是：

.av-section-color-overlay {
 background-position: center center !important;
  }

---

该网站是，我正试图将全屏头像图像居中

这里有几个相互竞争的问题：

您正在使用的元素中没有内容，因此背景图像会被剪裁

背景图像非常大，因此如果不1）将

DIV

元素设置为相对较大的高度/宽度，或设置

背景大小

CSS属性，则很难看到所需的居中

background repeat:repeat

和

background position:center

的概念构成了相互竞争的欲望。你不能同时将图像居中，并在两个方向上无限地平铺

因此，根据上述情况，如果您应用了一些进一步的样式修改，您可以使用指定的内容获得所需的行为：

background position:center

。（如果希望在两个方向上居中，则无需明确声明两次——这意味着如果只有一个值，则希望在两个方向上使用它。）

比如：

.av-section-color-overlay {
    background-color: #000;
    background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: center;
    height: 200px;
    width: 200px;
}

以及：

---

示例：

我建议不要重复背景，而是将其放入容器中，这样看起来更好。中心工程：

{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

---

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。读@squidgeOK，现在不清楚你想要什么，因为你引用的是av节颜色覆盖div，但不是它的父级。因为你在上面设置了背景位置，你需要知道你在里面的位置。让我们仔细看看它的父div。请提供更多详细信息。抱歉，我现在添加了包含背景图像的网站。我尝试设置

background repeat:no repeat；背景位置：中心和结果看起来不错。我想你不想重复，对吗？非常感谢你提供的信息。我曾尝试添加您的代码作为示例，但CSS似乎被过度编写，因为没有任何变化？我又加了一句！每一行都很重要。有什么想法吗？@squidg，你能把你的HTML放到JSFiddle中吗？我上面包含的链接应该是有效的，所以如果您完全遵循这个链接，任何其他问题都应该是与您现有的其他样式的交互。通常，您希望避免使用
！重要信息
，只要有可能，因为该关键字会显式覆盖CSS选择器的常规规则，这会使问题的疑难解答变得困难。
<div class="av-section-color-overlay"></div>

{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}