image-set() - 匹配合适的图像 - css 图像
image-set()
版本:CSS3
CSS image-set()函数表示法是一种让浏览器从给定集合中选择最合适的CSS图像的方法,主要用于高像素密度屏幕。分辨率和带宽因设备和网络访问而异。image-set()函数为用户的设备提供最合适的图像分辨率,提供一组图像选项(每个选项都有相关的分辨率声明),浏览器从中选择最适合设备和设置的图像。分辨率可以用作文件大小的代理-具有高分辨率屏幕的慢速移动连接上的用户代理可能更喜欢接收低分辨率图像,而不是等待加载高分辨率图像。image-set()允许作者提供选项,而不是确定每个用户需要什么。
示例
background-image: image-set( "cat.png" 1x,"cat-2x.png" 2x,"cat-print.png" 600dpi);
浏览器支持
IE、火狐浏览器不支持image-set() ,其余浏览器都支持image-set() |
语法:
image-set([ | ])取值
image-set()可以根据用户设备的分辨率匹配合适的图像。为不同的设备分配合适得图像。
示例
div{background-image: image-set("test.png" 1x,"test-2x.png" 2x,"test-print.png" 600dpi );}
上述代码将会为普通屏幕使用 test.png,为高分屏使用 test-2x.png,如果更高的分辨率则使用 test-print.png,比如印刷。
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)