文章目录
1. CSS背景
2. 背景颜色
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
background-color
3. 背景图片
这些背景都是一些图片
3.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 300px;
/*不能不写 url()*/
background-image: url(logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.2 运行结果
4. 背景平铺
4.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 300px;
/*不能不写 url()*/
background-image: url(logo.png);
/*取消平铺 只显示一个；默认情况下图片是平铺的*/
/*可以平铺 不平铺 x 轴平铺 y 轴平铺*/
background-repeat: repeat-x;
background-color: skyblue;
/*页面元素既可以添加背景颜色也可以添加背景图片*/
/*背景图片会压住背景颜色*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.2 运行结果
5. 背景图片位置
1. 参数是方位名词
6. 超大图片的居中处理
6.1 示例代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url(images/fenmian.jpg);
/*不用平铺*/
background-repeat: no-repeat;
/*使得图片垂直居中向上面展示*/
/*将中间最核心的东西显示出来*/
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
6.2 运行结果
7. 背景图片的精确位置
精确单位的第一个一定是 x 第二个一定是 y
7.1 示例代码
background-position: 66px 66px;
7.2 运行结果
8. 背景图片位置-参数是混合单位
混合单位第一个一定是 x 值 第二个一定是 y 值
8. 图像背景的固定（背景附着）
/*使得图片一直不动*/
background-attachment: fixed;
视差滚动 背景可以固定 让内容进行转动
9. 背景属性的复合写法
body {
background: black url(images/fenmian.jpg) no-repeat fixed center 20px;
}
10. 背景色半透明
前三个是 RGB 红绿蓝三原色
11. 背景总结
版权声明：本文为qq_40417070原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。