CSS背景

CSS背景

1.背景颜色

background-color: transparent透明色（默认）|color

div {
   
    width: 200px;
    height: 200px;
    background-color: transparent;
    background-color: pink;
}

2.背景色半透明

CSS3提供背景色半透明（IE9+版本浏览器支持）

background: rgba(red, green, blue, alpha)

• alpha:（全透明）0~1（不透明）
• 背景半透明指盒子背景半透明，但盒子里面内容不受影响

div {
   
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.3);
}

3.背景图片

实际开发常见于logo/一些装饰性的小图片/超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

background-image: url(xxx) | none

div {
   
    width: 300px;
    height: 300px;
    background-image: url(imgs/logo.jpg);
    background-image: none;
}

多图：

使用逗号,隔开

article {
   
    height: 500px;
    border: dashed 10px black;
    background-image: url(1.JPG), url(head.png);
    background-size: 50%, auto;
    background-position: top left, center;
    background-repeat: no-repeat;
}

4.背景裁切

background-clip: content-box | padding-box | border-box

article {
   
    padding: 30px;
    border: dashed 10px black;
    background-color: rgba(255, 0, 0, 0.5);
    height: 500px;
    /* 背景裁切 */