2.2 CSS的背景属性

左手的ㄟ右手 2023-01-14 13:58 153阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*   *  3. CSS的背景属性
     *   *  3.1 背景颜色
         *  3.2 背景图片
         *  3.3 背景平铺
         *  3.4 背景图片位置
         *  3.5 背景图像固定（背景附着）
         *  3.6 背景复合写法
         *  3.7 背景颜色半透明
         *  3.8 背景总结

--------------------

## 3. CSS的背景属性 ##

通过CSS背景属性可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等等

### 3.1 背景颜色 ###

background-color属性定义了元素的背景颜色

一般情况才背景颜色默认为 “transparent”（透明），我们也可以手动指定背景颜色为透明色

background-color: 颜色值；

### 3.2 背景图片 ###

background-image属性描述了元素的背景图像，实际开发中常用于logo或者一些装饰性的小图片或者是超大的背景图片，优点在于非常便于控制位置

background-image：none / url(url)

none: 无背景图（默认的）、url：使用绝对或相对地址指定背景图像

### 3.3 背景平铺 ###

background-repeat可以按照需要在HTML页面上对背景图片进行平铺（默认情况下是平铺的，占满整个盒子）

background-repeat: repeat / no-repeat / repeat-x / repeat-y

<table> 
 <thead> 
  <tr> 
   <th align="center">参数值</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">repeat</td> 
   <td align="center">背景图像在纵向和横向上平铺（默认）</td> 
  </tr> 
  <tr> 
   <td align="center">no-repeat</td> 
   <td align="center">背景图像不平铺</td> 
  </tr> 
  <tr> 
   <td align="center">repeat-x</td> 
   <td align="center">背景图像在x轴上平铺</td> 
  </tr> 
  <tr> 
   <td align="center">repeat-y</td> 
   <td align="center">背景图像在y轴上平铺</td> 
  </tr> 
 </tbody> 
</table>

页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会置于背景颜色上部

### 3.4 背景图片位置 ###

利用background-position属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位

<table> 
 <thead> 
  <tr> 
   <th align="center">参数值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">length</td> 
   <td align="center">百分数 | 由浮点数和单位标识符组成的长度值</td> 
  </tr> 
  <tr> 
   <td align="center">position</td> 
   <td align="center">top | center | bottom（垂直） left | center | right (水平) 等方位词</td> 
  </tr> 
 </tbody> 
</table>

**1. 背景位置-方位名词**

*  如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left、center和center、left效果一致
 *  如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
 *  对于超大背景图片，页面可能显示不全，background-position一般选为：center、top

**2. 背景位置-精确单位**

*  如果参数位置是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
 *  如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中

**3. 背景位置-混合单位**

*  如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

### 3.5 背景图像固定（背景附着） ###

background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment: scroll | fixed

### 3.6 背景复合写法 ###

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片位置 背景平铺 背景图像滚动 背景图片位置

background：transparent url(image.jpg) no-repeat fixed top;

### 3.7 背景颜色半透明 ###

background: rgba(0, 0, 0, 0.3)

*  最后一个参数是alpha透明度，取值范围在（0-1）之间
 *  习惯把0.3的0省略掉，写成background: rgba(0, 0, 0, .3)
 *  注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响

### 3.8 背景总结 ###

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

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70]: /images/20221022/1faa0ee6f70542ddb5975712890de798.png