css专栏 03.属性设置 02.背景属性

​​​​​​​

 

# 02.背景属性

[toc]{type: "ol", level: [3,4,5]}

### 背景填充
#### 背景颜色
```css
height: 360px;
width: 600px;
/*背景颜色 只能影响背景色*/
background-color: rgba(60,60,60,0.6);
```
![背景属性-背景填充-背景颜色](02.背景属性-背景填充-背景颜色.png)

#### 背景图片
##### 图片地址
```css
background-image: url("a.jpeg")
```
![背景属性-背景填充-背景图片-图片地址](02.背景属性-背景填充-背景图片-图片地址.png)
##### 是否平铺
```css
background-repeat: no-repeat
```
![背景属性-背景填充-背景图片-是否平铺](02.背景属性-背景填充-背景图片-是否平铺.png)
##### 图片位置
```css
background-position: center;
```
![背景属性-背景填充-背景图片-图片位置](02.背景属性-背景填充-背景图片-图片位置.png)
#### 背景透明度
```css
/*0.8: 影响所有标签内元素的透明度*/
opacity: 0.8;
```
![背景属性-背景填充-背景透明度](02.背景属性-背景填充-背景透明度.png)


### 背景边框
#### 基本属性
##### 边框宽度
```css
border-width: 4px;
```
##### 边框样式
```css
border-style: dashed;
```
##### 边框颜色
```css
border-color: brown;
```
![背景属性-背景边框-基本属性](02.背景属性-背景边框-基本属性.png)

#### 边框圆角
> 可用于设置圆形
```css
border-radius: 20px;
```
![背景属性-背景边框-边框圆角](02.背景属性-背景边框-边框圆角.png)

#### 分别设置
> left right top bottom
```css
border-left-color: blue;
```
![背景属性-背景边框-分别设置](02.背景属性-背景边框-分别设置.png)


### 其他属性
#### 设置图层
> 数字大的在上层，1-100
```css
z-index: auto;
```

#### 支持简写
```css
/*background: green center...;*/
```