CSS属性：背景属性

background 的常见背景属性

css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）

• background-color:#ff99ff; 设置元素的背景颜色。

• background-image:url(images/2.gif); 将图像设置为背景。

• background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）

  • no-repeat 不要平铺；
  • repeat-x 横向平铺；
  • repeat-y 纵向平铺。

• background-position:center top; 设置背景图片在当前容器中的位置。

• background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：

  • scroll（与fixed属性相反，默认属性）、
  • fixed（背景就会被固定住，不会被滚动条滚走）。

• 另外还有一个综合属性叫做 background，它的作用是：将上面的多个属性写在一个声明中。

CSS3 中，新增了一些background属性：

• background-origin
• background-clip 背景裁切
• background-size 调整尺寸
• 多重背景

background-color

background-color属性用于设置背景色，属性值可以使用十六进制颜色、RGB颜色、颜色名称等。

div {
    background-color: #f0f0f0;
}

background-image

background-image属性用于设置背景图片，属性值为url()函数，括号内为图片路径。

div {
    background-image: url('images/bg.jpg');
}

background-repeat

background-repeat属性用于设置背景图片的重复方式，常用属性值有：

• repeat：默认值，背景图片在水平和垂直方向上平铺
• repeat-x：背景图片在水平方向上平铺
• repeat-y：背景图片在垂直方向上平铺
• no-repeat：背景图片不平铺

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
}

background-position

background-position属性用于设置背景图片的位置，可以使用关键字（如top、right、bottom、left、center）或具体的像素值。

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}

使用像素值：

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: 100px 50px;
}

background-attachment

background-attachment属性用于设置背景图片是否随页面滚动，常用属性值有：

• scroll：默认值，背景图片随页面滚动
• fixed：背景图片固定，不随页面滚动

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

background 综合属性

background属性是一个综合属性，可以在一个声明中设置所有背景属性。

语法格式：

选择器 {
    background: 背景颜色 背景图片 背景重复 背景位置 背景固定;
}

举例：

div {
    background: #f0f0f0 url('images/bg.jpg') no-repeat center top fixed;
}

注意：

• 使用background属性时，属性值的顺序可以任意调整。
• 各个属性值之间用空格隔开。
• 如果不设置某个属性值，则使用默认值。

CSS3 新增的背景属性

background-origin

background-origin属性用于指定背景图片的原点位置，常用属性值有：

• padding-box：默认值，背景图片的原点位于内边距的左上角
• border-box：背景图片的原点位于边框的左上角
• content-box：背景图片的原点位于内容区的左上角

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-origin: content-box;
}

background-clip

background-clip属性用于指定背景的绘制区域，常用属性值有：

• border-box：默认值，背景绘制在边框及以内的区域
• padding-box：背景绘制在内边距及以内的区域
• content-box：背景绘制在内容区域

div {
    background-color: #f0f0f0;
    background-clip: content-box;
}

background-size

background-size属性用于指定背景图片的大小，常用属性值有：

• auto：默认值，背景图片保持其原始大小
• 具体的像素值：如 200px 100px，分别指定宽度和高度
• 百分比：如 50% 50%，相对于容器的百分比
• cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
• contain：缩放背景图片以完全装入背景区，可能背景区部分空白

div {
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

多重背景

CSS3 支持多重背景，可以在一个元素上设置多个背景图片。

div {
    background: 
        url('images/bg1.jpg') no-repeat top left,
        url('images/bg2.jpg') no-repeat bottom right,
        url('images/bg3.jpg') no-repeat center;
}

多重背景的语法是将多个背景图片的属性值用逗号分隔，先指定的背景图片在上层，后指定的背景图片在下层。

背景属性的应用场景

1. 设置网页背景

body {
    background-color: #f0f0f0;
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}

2. 使用CSS精灵（CSS Sprites）

CSS精灵是一种将多个小图标合并到一个大图片中，然后通过background-position属性来显示所需图标的技术。

.icon {
    width: 20px;
    height: 20px;
    background-image: url('images/sprites.png');
    background-repeat: no-repeat;
}

.icon-home {
    background-position: 0 0;
}

.icon-search {
    background-position: -20px 0;
}

.icon-user {
    background-position: -40px 0;
}

3. 创建渐变背景

CSS3 支持线性渐变和径向渐变背景。

线性渐变：

div {
    background: linear-gradient(to right, red, yellow);
}

径向渐变：

div {
    background: radial-gradient(circle, red, yellow);
}

4. 半透明背景

使用rgba()颜色值可以创建半透明背景。

div {
    background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50%透明度 */
}

总结

背景属性是CSS中非常重要的属性，通过合理使用背景属性，可以实现各种各样的页面效果，如设置网页背景、创建按钮和图标、实现渐变效果等。

在CSS3中，背景属性得到了进一步的增强，如多重背景、背景大小调整等，使得背景的应用更加灵活和强大。

在实际开发中，我们需要根据设计需求灵活运用这些属性，以实现各种各样的页面效果。同时，也需要注意浏览器兼容性问题，确保网页在不同浏览器中都能正常显示。