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