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

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 背景图像从中心偏移 x 个像素
• 使用 CSS 从右侧偏移背景图像

或者，您可以使用它calc来计算正确的位置。尽管此时并非所有浏览器都支持 calc 。

使用 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;
}

演示