我的 sprite 有问题。我的问题是我有一个菜单 Sprite ,以及一个视网膜菜单 Sprite 。但出于某种原因,视网膜 Sprite 的 Css 不起作用。这是我的代码:
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.menu li a,
background-image:url('images/sprite@2x.png');
-webkit-background-size: 110px 55px;
-moz-background-size: 110px 55px;
background-size: 110px 55px;
}
现在这是常规的导航 Sprite :
.menu li a{background: url('images/sprite-nav.png') no-repeat;width: 100%;height: 100%;display:block;}
.menu li.services{width: 110px;height: 55px;}
.menu li.services a{background-position: 0px -300px;}
.menu li.services a:hover{background-position: 0px 0px;}
顺便说一句,菜单有不止一张图片,(例如,我只是添加了更多菜单 li,并将“服务”替换为下一个菜单项。)
抱歉,我不熟悉它,所以无法上传到 jfiddle。 感谢所有答案!
最佳答案
OP,
您的媒体查询语法有误。媒体查询应将 {}
包裹在 CSS 定义周围。在 .menu li a
之后,您还缺少一个 {
。看起来你用的是逗号。
修改后的版本:
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.menu li a {
background-image:url('images/sprite@2x.png');
-webkit-background-size: 110px 55px;
-moz-background-size: 110px 55px;
background-size: 110px 55px;
}
}
关于css - Retina-Sprite CSS 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15398038/