Question

我需要背景图像水平居中，但垂直方向图像的底部应始终位于y = 350px。

我尝试过calc（100％ - 350px），但这不是正确的答案。问题是它是从图像的顶部而不是从底部计算的。

Answer 1

background-position: center;应该让你的工作。请参阅文档here。

Answer 2

在大多数浏览器（caniuse background edge offsets ）中，您现在可以将.element { background-position: left 10px top 30px }属性设置为4个值而不是2个。所以您可以执行类似

的操作

image

将10px放置在left的{{1}}和30px top的{{1}}。如果您未包含px值，则默认为0。

在您的情况下，请参阅下面的代码段

div {
  height: 200px;
  background-image: url("http://via.placeholder.com/250x200");
  width: 250px;
  background-repeat: no-repeat;
  background-position: center bottom 30px;
  background-color: red;
}

<div>

</div>

在此处阅读更多内容 - ＆gt; background position 4 values

根据图像的bootm定位背景图像

2 个答案: