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问题的建议为元素添加边距：

或者，您可以使用calc来计算正确的位置。虽然此时所有浏览器都calc is not supported。

使用计算可以做到这样的事情：

.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

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

1 个答案: