时间:2021-07-01 10:21:17 帮助过:5884人阅读
关于css3的background,功能很强大,有很多属性,像background-size等等,这些属性都可以写一篇博客来讲述。关于css3background的其他属性,后面会出博客来单独讲述!
CSS3/CSS1 background-image 属性
语法:
background-image:<bg-image> [ , <bg-image> ] *<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值:none
取值:
none:无背景图。
< url >:使用绝对或相对地址指定背景图像。
< linear-gradient>:使用线性渐变创建背景图像。(CSS3)
< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)
< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)
< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)
说明:
设置或检索对象的背景图像。
如果设置了background-image,同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。
对应的脚本特性为backgroundImage。
CSS中如何设拉伸背景图片铺满屏幕
我写的CSS代码是
#bg { width: 100%; height: 100%; background:url(images/beijing.png); }
这样子他会重复图片铺满屏幕,我想要让他拉伸图片铺满屏幕,应该怎么写呢?
background:url(images/beijing.png) repeat;
加个属
background-size:100%;background:url(images/beijing.png) no-repeat;
加个属background-size:100%;background:url(images/beijing.png) no-repeat; 图片会失真哦!
要么是外框限制了,都设成100%,我这里试验了下是铺满的,你再看看有没有别的属性影响了的。
以上就是css background-image如何平铺?的详细内容,更多请关注Gxl网其它相关文章!