css背景

## 背景颜色 background-color
​```css
div {
    width: 200px;
    height: 200px;
    background-color: transparent;
/*    透明*/
}
​```

## 背景图片 background-image
background-image
​```css
div {
    width: 200px;
    height: 200px;
    background-image: url(https://example.com/images/myImg.jpg);
}
​```

## 背景图片的平铺 background-image
​```css
div {
    width: 200px;
    height: 200px;
    background-image: url(https://example.com/images/myImg.jpg);
    /*    默认平铺*/
    background-repeat: repeat-x;
    /* 沿着x轴平铺*/
    background-repeat: repeat-y;
    /*沿着y轴平铺*/
    background-repeat: no-repeat;
    /*    不平铺*/
}

​```

## 背景图片的位置 background-position
background-position
​```css

div2 {
    background-position: center center;
    /*    方位有 center left top right bottom属性
    填两个参数 第一个是水平 第二个是垂直
    打个比方，如果你写的是center center 那就是水平垂直都居中
    如果你写的是left center 那就是水平向左，垂直在中间
    其他同理
    顺序不影响效果
    可以写具体像素值
    */

}
​```
## 背景附着 background-attachement
常常用来做时差滚动
​```css
div3 {
    background-image: url(https://example.com/images/myImg.jpg);
    background-attachment: fixed;
/*    scrool fixed*/
/*    fixed固定，不随内容向下滚动*/
/*    scrool滚动，随内容向下滚动*/
}

​```

# 半透明
​```css
div4{
    background-color: rgba(0,0,0,0.3);
}
/*最后的0.3是透明度，取值区间为（0，1）*/
​```