阅读量:0
CSS教程(5)：通过实例学习CSS背景，将深入讲解如何设置和应用CSS中的背景属性。
CSS教程(5)：通过实例学习CSS背景
设置页面的背景颜色
背景颜色是最常见的一种背景应用，可以通过background-color属性来设置。
body { background-color: #b0c4de; }这段代码将网页背景设置为浅蓝色。
| 属性 | 说明 |
background-color | 用于设置元素的背景颜色 |
设置图像作为页面背景
2、图片加入至背景的方式
通过链接
可以通过url()函数引入外部图片链接，将其设置为背景图像，如下所示：
```css
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
}
```
背景样式
background-size：用于控制背景图片的尺寸。
100%：图片宽度为100%，高度按比例缩放，可能重复。
50%：图片缩小到50%。
100px 50px：图片固定宽高。
cover：图片覆盖整个背景区域，保持宽高比。
contain：图片缩放到适应背景区域，保持宽高比。
```css
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
background-size: cover;
}
```
background-repeat：用于控制背景图片是否以及如何重复。
no-repeat：不重复。
repeat：默认值，平铺显示。
repeat-x：仅沿水平轴平铺。
repeat-y：仅沿垂直轴平铺。
```css
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
background-repeat: no-repeat;
}
```
3、定位背景图像
使用background-position可以调整背景图片的位置。
```css
body {
background-image: url('https://i.postimg.cc/MTmfKgKQ/image.png');
background-size: 20%;
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
```
4、固定背景
使用background-attachment: fixed;可以使背景图片在滚动时保持固定不动。
```css
body {
background-image: url('https://i.postimg.cc/MTmfKgKQ/image.png');
background-size: 20%;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
```
5、多图片背景
可以使用逗号分隔多个background-image来设置多重背景。
```css
body {
background-image: url('image1.png'), url('image2.png');
}
```
6、渐变背景
使用linear-gradient()或radial-gradient()函数创建渐变背景。
```css
body {
background: linear-gradient(to right, red, yellow);
}
```
相关问题与解答
1、问题一：如何在CSS中同时使用背景颜色和背景图片？
解答：可以在CSS中使用background简写属性同时设置背景颜色和背景图片。
```css
body {
background: #b0c4de url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg') no-repeat center center;
}
```
2、问题二：如何使背景图片在页面上居中且不重复？
解答：可以通过设置background-repeat: no-repeat;和background-position: center;来实现。
```css
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-repeat: no-repeat;
background-position: center;
}
```
以上内容就是解答有关“CSS教程(5)：通过实例学习CSS背景”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
