【web前端开发】CSS背景相关内容

叁歲伎倆 2023-09-27 15:26 179阅读 0赞

#### 文章目录 ####

*  背景颜色
 *  背景图片
 *  背景平铺
 *  背景位置
 *  background(复合属性)

## 背景颜色 ##

属性名:background-color
    取值:表示颜色的取值都可以填写,如:rgb

注意点:

*  背景颜色默认是透明的
 *  背景颜色**不影响**盒子的大小

`实用技巧:在平时使用一些盒子时,可以给盒子设置背景颜色,这样可以看清盒子的大小和位置`

示例:  
![在这里插入图片描述][e80ad6ccb39c48138ad2b5cc169ea327.png]  
![在这里插入图片描述][c75c75ff1d4645a094abdff90dadfe02.png]

## 背景图片 ##

属性名:background-image
    属性值:url('图片的路径')

注意点:

*  url中的引号可以省略
 *  背景图片默认水平和垂直方向是铺平的
 *  背景图片和背景颜色一样,是不能撑开盒子的

## 背景平铺 ##

属性名:background-repeat

属性值:

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>水平竖直方向都平铺(默认值)</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>不平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>沿水平方向平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>沿竖直方向平铺</td> 
  </tr> 
 </tbody> 
</table>

## 背景位置 ##

属性名:background-position
    属性值:水平方向 竖直方向

属性值取值有两种:**1.方位名词 2.数字+px(坐标)**  
1.方位名词

<table> 
 <thead> 
  <tr> 
   <th>方位</th> 
   <th>取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>水平方向</td> 
   <td>left center right</td> 
  </tr> 
  <tr> 
   <td>竖直方向</td> 
   <td>top center bottom</td> 
  </tr> 
 </tbody> 
</table>

可以把一个盒子看成一个九宫格,`最多可以表示9个方位`

2.数字+px

*  `坐标原点(0,0)在左上角`
 *  x轴:水平向右
 *  y轴:水平向左

> 方位名词和坐标取值可以混用

## background(复合属性) ##

背景也有复合属性(多个属性值写在同一个属性名里)

属性名:background
    属性值:单个属性值合写,属性值之间用空格隔开(没有先后顺序,可以按需求省略)

*  `背景图位置如果是英文写法可以颠倒顺序,但如果是坐标形式则不能颠倒位置`
 *  推荐写法:background:color image repeat position

> 感谢你的观看!希望这篇文章能帮到你!  
> 专栏[web前端开发][web]在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[e80ad6ccb39c48138ad2b5cc169ea327.png]: https://img-blog.csdnimg.cn/e80ad6ccb39c48138ad2b5cc169ea327.png
[c75c75ff1d4645a094abdff90dadfe02.png]: https://img-blog.csdnimg.cn/c75c75ff1d4645a094abdff90dadfe02.png
[web]: https://mp.csdn.net/mp_blog/manage/column/columnManage/12118781
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center