使用CSS3 calc进行背景定位而不使用modernizr

Question

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

我用过：

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

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

而是使用modernizr，我想使用以下内容：

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

因此，不了解calc的旧浏览器仍会将bg图像定位到中心，而较新的浏览器将使用第二个background-position属性，因为它将覆盖第一个。

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

Answer 1

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

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