CSS背景属性

1、背景图

作用：网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）

属性值：url（背景图URL)

注：背景图默认是平铺的效果！

2、背景图平铺方式

属性名：background-repeat（bgr）

属性值：

属性值	效果
no-repeat	不平铺
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

例子：

使用下面方式前：

代码：

结果：

①no-repeat（盒子左上角显示一张背景图）

代码：

结果：

②repeat

代码：

结果：

③repeat-x

代码：

结果：

④repeat-y

代码：

结果：

3、背景图位置

属性名：background-position

属性值：水平方向位置，垂直方向位置

例：左上角

background-position：0 0；

或background-position：left top；

①关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

②坐标（数字+px，正负都可以）

水平：正数向右，负数向左

垂直：正数向下，负数向上

③提示：a、关键字取值方式写法，可以颠倒取值顺序；

              b、可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向居中。

4、背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

①关键字

cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见；

contain：根据盒子尺寸计算图片大小（如果图的宽度跟盒子尺寸相等停止缩放，可能导致盒子有露白）。

②百分比：根据盒子尺寸计算图片大小

数字+单位（例如：px）

注：100%图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放。

5、背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

6、背景属性——复合写法

背景名：background（bg）

属性值：背景色  背景图  背景平铺方式  背景图位置/背景图缩放  背景图固定（空格隔开各个属性值，不区分顺序）