Retina-Sprite CSS无法正常工作 [英] Retina-Sprite CSS not working
问题描述
我的精灵有问题.我的问题是我有一个菜单精灵，还有一个视网膜菜单精灵.但是由于某种原因，视网膜精灵的Css无法正常工作.这是我的代码:
I'm having problem with my sprite. My problem is I have a menu sprite, aswell as a retina menu sprite. But for some reason the Css for the retina sprite doesnt work. Here's my code:
@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;
}
现在是常规的导航精灵:
Now here's the regular nav 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's并将服务"替换为下一个菜单项.)
Btw, the menu has more than one image, (eg. I just add more menu li's and replace 'services' with the next menu item.)
抱歉，我不熟悉，无法上传到jfiddle.所有答案表示赞赏！
Sorry I cant upload to jfiddle as I am not familiar with it. All answers appreciated!
推荐答案
OP，
您的媒体查询语法有误.媒体查询应在CSS定义周围包裹 {} .在 .menu li a 之后，您还缺少 {.看起来好像是逗号了.
You have an error in your media query syntax. The media query should wrap {} around the CSS definition. You were also a missing a { after .menu li a. Looks like you had a comma instead.
这是更正的版本:
@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;
}
}
这篇关于Retina-Sprite CSS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
