在CSS中,背景样式主要包括背景颜色和背景图像。在传统的布局中,只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来,设置背景样式不再使用传统HTML属性来定义,转而使用无限制、更灵活的CSS来定义。
目标
- 设置背景颜色
- 设置背景图片
- 操作背景图片样式
背景颜色-background-color
在CSS中,使用background-color属性来定义元素的背景颜色。
语法:background-color:颜色值;
说明:颜色值是一个关键字或一个16进制的RGB值。
![ff3ebea41120c753d910975964d0733f.png](https://img-blog.csdnimg.cn/img_convert/ff3ebea41120c753d910975964d0733f.png)
HTML标签
![b38ed71afb874972963c4e46c69407ca.png](https://img-blog.csdnimg.cn/img_convert/b38ed71afb874972963c4e46c69407ca.png)
背景颜色设置
![f3633860e14d9f74dbb61c365f32d3ec.png](https://img-blog.csdnimg.cn/img_convert/f3633860e14d9f74dbb61c365f32d3ec.png)
效果
背景图像--background-image
在CSS中,使用background-image属性来定义元素的背景图片。
语法:background-image:url("图像地址");
说明:图像地址可以是相对地址,也可以是绝对地址。
注意:给某个元素设置背景图像,元素要有一定的宽度和高度,背景图片才会显示出来。如果设置的元素的宽高过小,背景图片就无法完整地显示出来了。
![5854328d47eb59d9f718bcf5eb206513.png](https://img-blog.csdnimg.cn/img_convert/5854328d47eb59d9f718bcf5eb206513.png)
设置背景图片
![a62631b8fa5bd3e38fe320cc79085035.png](https://img-blog.csdnimg.cn/img_convert/a62631b8fa5bd3e38fe320cc79085035.png)
效果
背景重复样式--background-repeat
在CSS中,使用background-repeat属性可以设置背景图像是否平铺,并且可以设置如何平铺。
语法:background-repeat:取值;
![23d3b5793a45795919f75926b4369606.png](https://img-blog.csdnimg.cn/img_convert/23d3b5793a45795919f75926b4369606.png)
取值
当值是repeat,全屏覆盖
![b7717bf093cc63c5c031fa9e68ed2e18.png](https://img-blog.csdnimg.cn/img_convert/b7717bf093cc63c5c031fa9e68ed2e18.png)
全屏覆盖
当值是repeat-x,x轴方向覆盖
![08e3b5207e5d0daa5c725589af5ae822.png](https://img-blog.csdnimg.cn/img_convert/08e3b5207e5d0daa5c725589af5ae822.png)
x轴方向覆盖
当值是repeat-y,y轴方向覆盖
![d614f559d36106c771beac714ada47f6.png](https://img-blog.csdnimg.cn/img_convert/d614f559d36106c771beac714ada47f6.png)
y轴方向覆盖
当值是no-repeat,不复制
![15b1e10b97341e8d947491c88ea1a883.png](https://img-blog.csdnimg.cn/img_convert/15b1e10b97341e8d947491c88ea1a883.png)
不复制
背景图片位置--background-position
在CSS中,使用background-position设置背景图像的位置
语法:background-positon:像素值/关键字;
说明:语法中的取值包括两种,一种是采用像素值,另一种是关键字描述。
1. 像素值
要设置水平方向数值(x轴)和垂直方向数值(y轴),参数如下
![df331f1d148d45a13608ffee7d840647.png](https://img-blog.csdnimg.cn/img_convert/df331f1d148d45a13608ffee7d840647.png)
取值
假设设置一个距离左上角水平方向100px,垂直方向100px
![8de4d367d4aead859dac23a1fb9e9d46.png](https://img-blog.csdnimg.cn/img_convert/8de4d367d4aead859dac23a1fb9e9d46.png)
背景图片位置设置
效果如下
![34fe2c6f8ce14a474bf88dcaf91136bc.png](https://img-blog.csdnimg.cn/img_convert/34fe2c6f8ce14a474bf88dcaf91136bc.png)
效果
2. 关键字
当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,只不过值不是使用px为单位的数值,而是使用关键字代替。
![0902915e080d893234212e6e444da4db.png](https://img-blog.csdnimg.cn/img_convert/0902915e080d893234212e6e444da4db.png)
取值
假设我们要设置一个水平方向、垂直方向都居中的位置,就可以这样设置
![975424da35aceeac09cf7c8bc8c3c8d7.png](https://img-blog.csdnimg.cn/img_convert/975424da35aceeac09cf7c8bc8c3c8d7.png)
背景图片位置设置
这样他就永远都处于屏幕的正中间
![31a7b65b96427ad73ec06d656f6c57fc.png](https://img-blog.csdnimg.cn/img_convert/31a7b65b96427ad73ec06d656f6c57fc.png)
效果
背景固定样式--background-attachment
在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动
语法:background-attachment:scroll/fixed;
说明:background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。
![548db6b23eb909a88af1a24e704e4d4a.png](https://img-blog.csdnimg.cn/img_convert/548db6b23eb909a88af1a24e704e4d4a.png)
背景固定设置
![97780c68b3960ffcd0a2062e854cb1f6.gif](https://img-blog.csdnimg.cn/img_convert/97780c68b3960ffcd0a2062e854cb1f6.gif)
效果
总结
![c965df7ce6f64cab7952581a5b0f7254.png](https://img-blog.csdnimg.cn/img_convert/c965df7ce6f64cab7952581a5b0f7254.png)
总结