首页 > 代码库 > css图片高清适配

css图片高清适配

2024-09-16 15:42:26   215人阅读

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

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

    .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图片高清适配


联系
我们