购物车
登陆 / 注册
微信扫码登陆

推荐手册

image-set()

image-set()
image-set() 可以根据用户设备的分辨率匹配合适的图像
编辑:前端控 前端控 更新时间:2019-03-21 14:58:56

image-set()

语法:

image-set() = image-set( <image-set-option># )

<image-set-option> = [ <image> | <string> ] <resolution>

说明:

image-set() 可以根据用户设备的分辨率匹配合适的图像。

为不同的设备分配合适得图像;

示例

div {
	background-image: image-set( &quot;test.png&quot; 1x, &quot;test-2x.png&quot; 2x, &quot;test-print.png&quot; 600dpi );
}

上述代码将会为普通屏幕使用 test.png,为高分屏使用 test-2x.png,如果更高的分辨率则使用 test-print.png,比如印刷。

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-11.02.0-38.04.0-20.03.1-5.1

15.0

-28.0-webkit- 

3.2-5.12.1-4.318.0-20.0

21.0-

43.0-webkit-

6.0-

8.1-webkit- 

6.0-

8.1-webkit-

4.4

-4.4.4-webkit- 

21.0

-43.0-webkit- 

需要注意的是,目前带有-webkit-的这些浏览器支持的语法是:image-set( <url> | <string> ),写法如下:

示例

div {
	background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号