我在加载视网膜图像时遇到问题。
我有两个imagesprites。一正常和一视网膜。
问题是我不知道如何按比例缩小视网膜图像,现在的尺寸是其两倍。
这是我的CSS。
.home {
background: url('../images/buttonSprite.png') -49px -52px;
width: 43px;
height: 43px;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
.home {
background: url('../images/[email protected]') no-repeat -79px -113px !important;
-webkit-background-size:43px 43px;
}
}
如何解决这个问题呢?
最佳答案
试试这个:
.home {
background: url('http://img580.imageshack.us/img580/9284/buttonsprite.png') no-repeat -49px -53px;
width: 43px;
height: 43px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-moz-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min-device-pixel-ratio: 1.5) {
.home {
background: url('http://img90.imageshack.us/img90/5624/buttonsprite2x.png') no-repeat -39px -56px;
background-size: 200px 496px;
}
}
注意,我使用的像素比率为1.5,这几乎是一个标准。我还包括了其他前缀。
关于css - 如何使用CSS缩小视网膜图像 Sprite ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14611459/