以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。
关于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：无背景图。
：使用绝对或相对地址指定背景图像。
立即学习“前端免费学习笔记（深入）”；
：使用线性渐变创建背景图像。（CSS3）
：使用径向(放射性)渐变创建背景图像。（CSS3）
：使用重复的线性渐变创建背景图像。（CSS3）
：使用重复的径向(放射性)渐变创建背景图像。（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如何平铺？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
