background |
您所在的位置：网站首页 › 男装燕尾服款式分析 › background |
background
|
background语法：
image-set() = image-set( # )
= [ | ]
image-set() 可以根据用户设备的分辨率匹配合适的图像-为不同的设备分配合适得图像 div { background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); } //上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷 //------------或者url------------------ body { background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi); background-image: image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi); } 兼容性：
需要注意的是，目前这些浏览器支持的语法是：image-set( | )，写法如下 div { background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x ); } css image-set 让浏览器自动切换1x，2x图片 方法一：
方法二：
background-image: url(img.jpg');
background-image:image-set( url(img.jpg) 1x, url([email protected]) 2x );
操作实例代码
样式
.image-set-by-zxx {
width: 128px;
height: 96px;
background: url(../images/image-set-not.jpg);
background: -webkit-image-set(url(../images/128px1x.jpg) 1x, url(../images/256px2x.jpg) 2x, url(../images/512px3x.jpg) 3x);
background: image-set(url(../images/128px1x.jpg) 1x, url(../images/256px2x.jpg) 2x, url(../images/512px3x.jpg) 3x);
background-size: cover;
}
img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。 
上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效 img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。 属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔 
上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px
|
【本文地址】
今日新闻 |
推荐新闻 |