前端网页学习7（css背景属性）
背景属性：
- 背景颜色
background-color:透明的/颜色.（默认透明） - 背景图片
相比于插入图片更容易控制位置
background-image: none/url();（默认无） - 背景平铺
background-repeat: repeat/no-repeat/repeat-x/repeat-y(默认平铺)
平铺/不平铺/水平平铺/竖直平铺 - 背景位置
background-position: x y;
xy可使用方位名词或精确位置。
1方位名词（与xy顺序无关）：
center/top/left/right/bottom
(若省略一个，则默认居中)
2精确参数：
px/em
(若省略一个，则y默认居中)
3混合单位：
方位名词和精确参数混合使用 - 背景固定
background-attachment: scroll/fixed;（默认滚动）
正常写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
body {
background-color: red;
/* 默认透明颜色 */
background-image: url(backimage1.png);
/* 图片背景 */
background-repeat: no-repeat;
/* 不平铺 */
background-position: 0 0;
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
简写方法：
div {
background: transparent url(backimage1) repeat fixed top;
}
顺序无要求
背景色半透明
span {
background: rgba(red, green, blue, 0.5)
}
0-1从完全透明到完全不透明