使用 CSS3 计算进行背景定位，无需现代化

Question

我特别需要用引用右侧而不是左侧的背景图像来设置单个div的样式，因为它是默认的背景位置。

我使用过：

div {
 background-position: calc(100% - 100px) center;
 background-position: -webkit-calc(100% - 100px) center;
 background-position: -moz-calc(100% - 100px) center;
}

问题出在较旧的 Safari 版本（可能还有其他较旧的浏览器）上。

与其要使用现代化，不如说我想使用以下方法：

div {
 background-position: center;
 background-position: calc(100% - 100px) center;
}

因此，不理解计算的旧浏览器仍将 bg 图像定位到中心，而较新的浏览器将使用第二个背景位置属性，因为它将覆盖第一个属性。

这似乎给出了一种简单的解决方案...你对这种（显然不是那么优雅的）方法有什么看法？

Answer 1

你可以用透明边框来伪造它：

background   : url('/yourimg.png') no-repeat right center;
border-right : 100px solid transparent;