CSS3系列实例教程:情况照片(情况尺寸和多情况图

2021-03-10 23:38 jianzhan

情况照片/纹路有许多种应用方法,经常用于为加上网站的最好的页面清理。如今它在CSS3中被高度重视,大家能够运用多情况图和情况照片规格来完成更完善的实际效果。

CSS3的情况照片尺寸能够写成 background-size:Apx Bpx;
-Apx = x轴(照片宽度)
-Bpx = y轴(照片高宽比)

掌握了这些,大家刚开始体验这个特点吧:
最好是适用CSS3情况尺寸的访问器是Safari和Opera,因此大家只必须应用-o和-webkit前缀。

情况尺寸



拷贝编码
编码以下:

#backgroundSize{
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

访问器适用:

以便在CSS3中运用多情况照片,大家应用都好分隔,比如:

拷贝编码
编码以下:

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

大家能够在1行编码中尝试置放好几个不一样的照片…
多情况图



拷贝编码
编码以下:

#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

访问器适用: