cssbackground属性简书

CSS background属性的作用是什么

在网页设计中，背景（background）是一个重要的视觉元素，它可以为页面添加颜色、图像、图案等视觉效果，CSS（层叠样式表）是一种用于描述HTML文档样式的语言，通过使用CSS，我们可以对网页的背景进行更加精细的控制，在CSS中，background属性是一个复合属性，它包含了多个子属性，可以用来设置元素的背景样式，下面我们来详细了解一下CSS background属性的作用及其各个子属性的用法。

1、背景颜色

background-color属性用于设置元素的背景颜色，可以设置为任何有效的颜色值，包括颜色名称、十六进制颜色代码、RGB值等。

div {
  background-color: red;
}

这段代码将使得所有div元素的背景颜色变为红色。

2、背景图片

background-image属性用于设置元素的背景图片，可以设置为任何有效的URL地址，或者使用相对路径或数据URI。

body {
  background-image: url('background.jpg');
}

这段代码将使得整个页面的背景图片变为名为background.jpg的图片，需要注意的是，如果设置了背景图片，那么背景颜色的设置将不再生效。

3、背景重复

background-repeat属性用于设置背景图片的重复方式，可选值有：no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）和repeat（水平和垂直都重复）。

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

这段代码将使得所有div元素的背景图片不重复显示。

4、背景定位

background-position属性用于设置背景图片的起始位置，可以使用关键字（如top、bottom、left、right等）或者使用长度值（如px、em等）。

div {
  background-image: url('background.jpg');
  background-position: center;
}

这段代码将使得所有div元素的背景图片居中显示。

5、背景大小

background-size属性用于设置背景图片的尺寸，可以使用关键字（如contain、cover等）或者使用长度值（如px、em等）。

div {
  background-image: url('background.jpg');
  background-size: cover;
}

这段代码将使得所有div元素的背景图片覆盖整个元素区域。

6、背景附件

background-attachment属性用于设置背景图片是否随页面滚动而滚动，可选值有：scroll（随页面滚动）、fixed（固定不动）和local（根据元素的滚动位置进行移动）。

body {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

这段代码将使得整个页面的背景图片固定不动，不会随着页面的滚动而滚动。

7、多重背景图片与渐变背景

除了上述子属性外，CSS还支持多重背景图片和渐变背景，多重背景图片可以通过逗号分隔的方式设置多个背景图片，每个背景图片都可以单独设置其重复方式、定位和大小等属性，渐变背景则可以通过linear-gradient()或radial-gradient()函数创建线性或径向渐变效果，并设置为元素的背景。

div {
  background-image: url('background.jpg'), linear-gradient(to right, red, orange);
  background-repeat: no-repeat;
  background-position: center;
}

这段代码将使得所有div元素的背景同时包含一张名为background.jpg的图片和一个从左到右的红色到橙色的渐变效果，需要注意的是，多重背景图片和渐变背景的子属性设置会按照从上到下的顺序应用到每个背景图片或渐变效果上。