css3 image-set 不同分辨率适用不同背景图片 解决图不够清晰

 

比如logo显示 放大显示 还是会清晰 这里是使用了至少两个图片 用的css3  image-set属性

直接实例

css

a{

width:100px;

height:50px;

background-images:images-set(url(/images/logo2.png) 1x,url(/images/logo3.png) 2x );

background-repeat:no-repeat;

}

完整实例 HTML

<a href="index.html">

</a>

CSS

.header .logo a{
display: inline-block;
width: 211px;
margin-top: 16px;
text-align: center;
background-image: -webkit-image-set(url(/images/logo3.png) 1x,url(/images/logo2.png) 2x);
height: 31px;
background-repeat: no-repeat;

}