CSS-综合样式属性，背景样式属性的使用详解

淩亂°似流年 2023-08-17 17:27 162阅读 0赞

### 文章目录 ###

*   *   *   *  background-color
             *  background-image
             *  background-repeat
             *  background-position
             *  background-attachment
             *  背景简写
             *  background-size

`background` 属性用于给元素添加背景，可以是背景色，也可以是背景图

background 属性是一个系列属性（综合属性），可以单独设置某个属性也可以综合性的设置；常见的属性有：

*  `background-color` 背景颜色
 *  `background-image` 背景图片
 *  `background-repeat` 背景图像是否重复
 *  `background-position` 背景图像位置
 *  `background-attachment` 背景图像附着
 *  `background-size` 背景图片尺寸

#### background-color ####

`background-color: transparent;` 设置元素的背景色；对应的属性值可以是十六进制颜色、rgba、rgb、颜色单词；默认值为 transparent（透明）

#### background-image ####

`background-image: url(url);` 设置元素的背景图片

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>无背景图（默认值）</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>背景图像的绝对或相对地址</td> 
  </tr> 
 </tbody> 
</table>

如果同时给元素设置背景色和背景图，会优先显示背景图；未被背景图覆盖的区域显示背景色

示例：

div { 
      width: 500px;
      height: 200px;
      background-image: url(./images/cat.jpg);
      background-color: blue;
      border: 2px solid red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### background-repeat ####

`background-repeat: repeat` 设置背景图像是否重复（平铺方式）

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>图像会在水平和垂直方向上重复，默认值</td> 
  </tr> 
  <tr> 
   <td>reperat-x</td> 
   <td>在水平方向上重复（横向平铺）</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>在垂直方向上重复（纵向平铺）</td> 
  </tr> 
  <tr> 
   <td>no-rapeat</td> 
   <td>不重复</td> 
  </tr> 
 </tbody> 
</table>

水平方向重复：

div { 
    	/* ... */
    	background-repeat: repeat-x;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]  
垂直方向重复：

div { 
    	/* ... */
    	background-repeat: repeat-y;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]  
不重复：

div { 
    	/* ... */
    	background-repeat: no-repeat;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

#### background-position ####

`bakcground-position: 0% 0%;` 用于设置背景图片的位置；该属性的属性值为两个，分别是 x 坐标和 y 坐标，属性值可以是 px（像素）、方位名词（英文单词）、%（百分比），属性值也可以混合使用；默认的属性值为 `0% 0%`；使用该样式属性时，必须先指定 background-image 属性

*  【用英文单词（方位名词）】
    
     *  水平方向：left、center、right
     *  垂直方向：top、center、bottom
        
        需要注意的是：如果只设置了一个值，另一个之默认为 center
 *  【用固定值（精确坐标）】
    
     *  50px 50px 背景距离容器的左边50px，容器顶端50px；第一个值为 x 坐标，第二个值为 y 坐标；如果只指定一个值另一个默认居中
 *  【用百分比】
    
     *  50% 50% 水平居中，垂直居中
 *  【混合使用】
    
     *  left 10px 背景靠左边齐，距离容器顶端10px

#### background-attachment ####

`background-attachment: scroll;` 设置背景图像是否固定或者随着页面的其余部分滚动

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll</td> 
   <td>背景图像随着对象内容滚动</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>背景图像固定</td> 
  </tr> 
 </tbody> 
</table>

#### 背景简写 ####

在实际的开发中，多数情况下使用背景简写的方式

语法：`background: 背景颜色 背景图片地址 背景平铺 背景附着 背景位置;`

示例：

background: transparent url(./images/bg.jpg) repeat-x  scroll center center;

#### background-size ####

`background-size: auto;` 设置背景图像的大小；默认值为 auto；该属性的属性值为两个，第一个值为宽度第二个值为高度；如果只设置一个值另一个默认为 auto；属性值可以是具体像素值，也可以是百分比等

*  使用 `px` 像素时，第一个值设置宽度，第二个值设置的高度；如果只给出一个值，第二个是设置为 auto(自动)
 *  使用 `%` 时，将计算相对于背景定位区域的百分比；第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto
 *  `cover` 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
 *  `contain` 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230808/a60ee66461cd43b7ab09b82f0c95954a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230808/54db25eb2fc243c48875c26602ac867c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: /images/20230808/389570902bcc482aadf69a597007f4f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: /images/20230808/92155cc59383488a9031ec5a96ebe9f8.png