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

这里有几个相互矛盾的问题：

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

和：

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

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

Answer 2

我建议不要重复背景，而是在容器中用字母装箱，这样看起来更好。中心作品：

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

CSS 背景位置不起作用？

CSS Background-Position Not Working?

css

background-position