css 情况照片平铺技能

2021-03-15 19:11 jianzhan
应用css来设定情况照片同传统式的做法1样简易,但相对传统式操纵方法,css出示了更多的可控性选项,大家先看来看最基础的设定照片的方式。xhtml编码:

拷贝编码
编码以下:

<div id="content">
</div>

css编码:

拷贝编码
编码以下:

#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/bg.GIF);
}

网页页面中id为content的元素被大家设定了应用images文档夹下的bg.GIF做为情况,与传统式报表式合理布局中的设定并没有区别,在默认设置情况下,情况一样以平铺的方法出現在元素当中。但是应用css来操纵情况自然不能能这般简易,具体上css为大家出示了更多用于操纵情况的特性,包括能够操纵元素是不是必须平铺。改善后的编码:

拷贝编码
编码以下:

#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/bg.GIF);
background-repeat: repeat-x;
}

加了background-repeat:repeat-x;以后,情况如今只在X轴即横向开展了平铺实际操作,纵向并沒有开展平铺。这就是css针对情况细节的操纵之1。background-repeat是对于情况平铺的特性设定,可选的值包括:

拷贝编码
编码以下:

repeat 即默认设置方法,彻底平铺情况;
no-repeat 在X及Y轴方位均不平铺;
repeat-x 横向平铺情况;
repeat-y 纵向平铺情况。

平铺选项是在网页页面设计方案中可以常常应用到的1个选项,比如网页页面中常见的渐变色式情况。选用传统式方法制做渐变色式情况,常常必须宽度为1px的情况开展平铺,但以便使纵向已不开展平铺,常常高宽比设为高于1000px。选用repeat-x方法的话,只必须将渐变色情况按必须高宽比设计方案就行已不必须应用超高的照片来平铺了。