背景样式

背景样式

---

背景颜色background-color

作用：设置或检索对象中的文本是否为小型的大写字母

属性值：

1. transparent：默认值，透明
2. [color]：参考颜色表示

---

背景图background-image

作用：添加背景图

属性值：

1. none：默认值，无
2. url([url])：指定图片地址

div { background-image: none; }
div { background-image: url('../images/pic.png'); }

---

背景铺排方式background-repeat

作用：设置对象的背景图像铺排方式。

属性值：

1. repeat：默认值（背景图像在纵向和横向平铺）。
2. no-repeat：背景图像不平铺。
3. repeat-x：背景图像仅在横向平铺。
4. repeat-y：背景图像仅在纵向平铺。

---

背景图片位置background-position

作用：设置对象的背景图像位置。

属性值：
{x-number | top | center | bottom } {y-number | left | center | right}：控制背景图片在元素的位置：x轴、y轴。其铺排方式为no-repeat

div {
background-image: url('../images/pic.png');
background-repeat: no-repeat;
background-position: 50px 50pх;
}

---

背景图片滚动方式background-attachment

作用：设置对象的背景图片滚动位置

属性值：

1. scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
2. fixed：当页面的其余部分滚动时，背景图像不会移动。

---

复合属性background

将有关背景的属性写在一行里，格式如下

background: color image repeat attachment position

---

背景图片大小background-size

background：设定背景图像的尺寸。

属性值：

1. [width]px [height]px：固定长度，如果只设定width，则height为auto
2. [width]px [height]px：百分比，相对当前元素的大小
3. cover：完全覆盖，只用一张图片放大，直至完全覆盖，有可能显示不全
4. contain：完全覆盖，把图像图像扩展直至完全显示

cover效果：

contain效果：