码迷,mamicode.com
首页 > Web开发 > 详细

css图片高清适配

时间:2017-04-23 01:17:25      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:url   图片   round   log   像素   存在   media   style   原因   

  同一张图片,在普通屏显示正常,但高清屏出现模糊。原因是原来一个像素的点分成的四个像素的点进行了显示。

解决方案:在高清屏中把图片变成二倍图,前提是二倍的高清图已经存在。

    .icon{
        background: url(bg.png) no-repeat; /* 宽200px; */
    }
    @media screen and (-webkit-min-device-pixel-ratio:1.5){
        .icon{
            background-image: url(bgx2.png);  /*  宽400px; */
            background-size: 200px;   /* 宽200px; */
        }
    }    

 

 

css图片高清适配

标签:url   图片   round   log   像素   存在   media   style   原因   

原文地址:http://www.cnblogs.com/littlewriter/p/6750080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!