有没有办法相对于元素的中心定位背景图像？

Question

我有一个想要应用背景的元素，但我希望根据其右坐标定位背景图像。

我可以使用容器 div 来表示背景，但在这种情况下并不实用。

我目前有以下规则：

.myelem {
  background-image: url("myelem.png");
  background-position: 5% 60%;
  background-repeat: no-repeat;
}

这在很大程度上是因为图像的大小。如果可能的话，我想要指定背景的相对位置是middle 而不是left。

Answer 1

css 属性 background-position 接受 center 作为值：

.myelem {
    background-image: url("myelem.png");
    background-position: center center;
    background-repeat: no-repeat;
}

或简写版本：

.myelem {
    background: url("myelem.png") center center no-repeat;
}

更新 1

没有简单的 css 方法将背景位置设置为中心（或底部或右侧）的偏移量。

您可以为实际图像添加填充，使用 javascript 计算页面加载后的位置，按照以下 SO 问题中的建议为元素添加边距：

• HTML background image offset by x pixels from the center
• Offset a background image from the right using CSS

您也可以使用calc 来计算正确的位置。尽管此时所有浏览器都使用calc is not supported。

使用 calc 你可以做这样的事情：

.myelem {
    background-image: url("myelem.png");
    background-position: 5% 60%;
    background-position: -webkit-calc(50% - 200px) 60%;
    background-position: calc(50% - 200px) 60%;
    background-repeat: no-repeat;
}

Demo