Question

我有以下代码，我正在尝试添加一个属性以使背景居中，但它无效。

现有代码：

<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：

opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}

我试图添加的CSS是：

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

该网站为http://andytraph.com/，我正试图将全屏阿凡达图像置于中心位置

Answer 1

我建议不要重复背景，而是将它装在容器中，这看起来更好。中心工作：

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

Answer 2

这里存在一些竞争问题：

您正在使用的元素中没有任何内容，因此背景图片会被剪裁。
背景图像非常大，因此如果没有1）将background-size元素设置为相对较大的高度/宽度或设置background-repeat: repeat CSS属性，则很难看到所需的居中。
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; }。（如果你想要在两个方向上居中，你不需要明确说明两次 - 如果只有一个值，则暗示你想在两个方向上使用它。）

类似的东西：

<div class="av-section-color-overlay"></div>

和

img

示例：https://jsfiddle.net/7mpqfd22/2/

CSS背景位置不起作用？

2 个答案: