css - 在没有modernizr的情况下使用CSS3 calc进行背景定位

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

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

这似乎给出了一种简单的解决方案...... 您对这种(显然不太优雅)方法有何看法？

Answer 1

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

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