七月

男儿到死心如铁。看试手,补天裂

欢迎来到我的博客~


webkit image set

115 江湖

做小说pc站的时候,用了等比例的图标做背景。做出来的效果是这样的,图标显示很模糊。 这种效果当然是不行的。【为什么不行?问我们测试妹子~~】

近期新公司搬家开发环境没搭好,不小心点进了115江湖。传送门

咦?大神这是怎么处理的。

好吧。svg..

然后看了其他的图标,发现png图片比较清除的原因是用了一个css3的属性。

-webkit-image-set

  • 作用是: 可以根据用户设备的分辨率匹配合适的图像.
  • 用法: background-image: -webkit-image-set(url(./icon_device.png) 1x, url(./icon_device@2x.png) 2x);

用了这种写法之后,图片在高分辨率并且是retina屏时会使用2倍图,然后图标会清晰很多。

看一下兼容性

不好意思的很,如果还要考虑兼容性的话,您还是撤吧。

卖萌🐶

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦