精通CSS+DIV：5，用CSS设置网页背景

最新推荐文章于 2025-08-04 12:26:33 发布

最新推荐文章于 2025-08-04 12:26:33 发布 · 152 阅读

文章标签：

#CSS #HTML

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中背景属性的应用，包括背景颜色、背景图片的设置方法及其各项子属性如位置、重复方式、固定方式等。此外还展示了如何综合设置背景样式以减少代码量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景颜色
1，页面背景色
[code]
body {
background-color: #5b8a00;
}
[/code]
2，使用背景色给页面分块
[code]
body {
background-color: #ffebe5;
}
.topbanner {
background-color: #fbc9ba;
}
.leftbanner {
background-color: #6d1700;
}
[/code]
二、背景图片
1，页面背景图
[code]
body {
background-image: url(test.jpg);
}
[/code]
2，背景图的重复
[code]
body {
background-image: url(test.jpg);
background-repeat: repeat-y;
}
[/code]
3，背景图的位置
[code]
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: 30% 70%
}

body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: 300px 25px;
}
[/code]
4，固定背景图片
[code]
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
[/code]
5，添加多个背景图片
[code]
body {
background-image: url(test1.jpg);
}
div {
background-iamge: url(test2.jpg);
}
[/code]
6，背景样式综合设置
[code]
body {
background: blue url(test.jpg) no-repeat fixed 5px 10px;
}
[/code]
类似于border、font等属性，可以将多个设置集成到一个语句中以节省代码，加快网络下载速度