上海网页设计如何在css背景图片中拉伸,100%满屏显示? 这个问题听起来很简单。 但是很遗憾我会告诉大家。 没有我们想象的那么简单。
例如,为容器(body、div、span )设定背景。 此背景的长宽值在css2.1之前无法更改。
所以实际的结果只能显示重复,所以会出现repeat、repeat-x、repeat-y、no-repeat这样的属性。 用于控制背景图像的显示。 一般用作背景图像的有两种:
1 .是整个lmdpy,大小和区域大小正好一致
通过repeat后,形成非常规的大背景的小条形图
但是css3出现后,这种状况得到了改善。 background-size属性实现我们以前的希望
而且这个属性在firefox、chrome、以及ie9中也可以使用
具体使用方法如下。
背景图大小(数值显示方式) :
代码是下一个:
# background-size { background-size :200 px 100 px; }
背景图大小(百分比) :
代码是下一个:
# background-size2{ background-size :30 ` %; }
背景图像的大小(用等比扩展图像填充元素,即cover值) :
代码是下一个:
# background-size3{ background-size : cover; }
背景影像的大小(等比缩小影像会符合元素的大小,也就是contain值) :
代码是下一个:
# background-size4{ background-size : contain; }
背景图的大小(用图像本身的大小填充元素或auto值) :
代码是下一个:
# background-size5{ background-size : auto; }