背景属性

背景属性

1、背景

分为两种：背景颜色，背景图片。

2、背景颜色

我们来说一下它的属性：
background-color
取值为：
任意的合法颜色（ …）或者transparent（透明）
注意：背景颜色会填充到元素的内容区域、内容边框区域以及边框区域
举个例子：

3、背景图像

它的作用是：
以图像作为元素的背景
它的属性为：background-image
取值：url（输入背景图像的路径）
ex：

4、背景重复

它的属性：
background-repeat
它的取值：
（1）、repeat
默认值，水平垂直方向都平铺。
（2）、repeat-x
仅在水平方向平铺。
（3）、repeat-y
仅在垂直方向平铺。
（4）、no-repeat
不平铺。
举个"栗子"：
我上面那个图片就是默认值现在我们让它不平铺

5、背景图片尺寸

它的属性：background-size
取值为：
（1）、value1 value2（中间记得敲空格）
指定背景图像的宽度和高度，px为单位。
（2）、value1% value2%（这个也是记得敲空格）
采用当前元素的宽和高的百分比作为背景
图像大小。
（3）、cover
覆盖
将背景图等比放大，直到背景图完全覆盖
到元素的所有区域为止。
（4）、contain
包含
将背景图等比放大，直到背景图像的下边
或右边有一个边缘碰到元素为止。
举个例子：

6、背景图片固定

它的属性： background-attachment
取值：
（1）、scroll
滚动，默认值，背景图会随着文档而滚动。
（2）、fixed
固定，背景图不会随着页面文档而发生滚
动，一直保持在可视化区域中的固定位置
处
body元素效果最佳…
这个不太好举例子…要不算了…

7、背景图片定位

它的作用:改变背景图像在元素中的默认位置
属性为：background- position
（1）、x y（中间敲空格）
x ：背景图水平偏移距离，取值为正，向右偏移，取值为负，向左偏移。
y:背景图垂直偏移距离，取值为正，向下偏移，取值为负，向上偏移。
（2）、x% y%（记得中间敲空格）
0% 0% ：背景图在元素左上角；
100% 100% ：背景图在元素右下角；
50% 50%：背景图在元素的中间。
（3）、关键字
X ：left / center / right （左、中、右）
y ：top / center / bottom （上、中、下）
background- position：center；（水平和垂
直都在中间位置处）
background-position：left top；（背景图在左上方）
“栗子”：

8、CSS Spritse

可以叫：‘雪碧图’或者‘精灵图’都可以。
它的作用：
将一些小的背景图，合并到大的背景当中去
以便实现减少服务器端的请求次数。
步骤：
（1）、根据要看的图像大小，创建一个元素。
（2）、将"雪碧图"作为元素的背景图，再通过背景图像位置实现位置偏移，将用户要看的图像，显示在元素中。
这个举例要不dei啊…

9、背景属性

它的属性:：background
取值为：color url() repeat attachment
position ；
注意：如果不设置其中的某个值，将采用默认值。
ex :
background ：red；
background：url(a.jpg) -45px -112px；
注意：要用空格隔开

[^1]：这就是关于背景属性的相关知识，不足之处请不吝赐教，谢谢，最后让我们一起加油吧！