CSS 背景位置不起作用？

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. 您正在使用的元素中没有内容，因此背景图像被剪裁了。
2. 背景图像非常大，因此如果不使用以下任一方法很难看到所需的居中位置 1) 将 DIV 元素设置为相对较大的高度/宽度，或设置 background-size CSS 属性。
3. 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;
}

和：

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

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