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

Question

我有一个元素,我希望应用背景,虽然我希望背景图像基于其正确的坐标定位.

我可以使用容器div来表示背景,尽管在这种情况下它并不真实.

我现在有以下规则:

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

由于图像的大小,大多数情况下都有效.如果可能的话,我想要一些东西来指明背景的相对位置middle而不是left.

Answer 1

css propoerty 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;
}

演示