HTML/CSS/JS学习笔记 Day6（CSS--C3 背景样式）
跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day6 内容梳理：
目录
CSS 3.背景样式
3.0 背景样式的分类
背景属性可设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等等。
| 属性 | 作用 | 值 |
| background-color | 背景颜色 | 有三种赋颜色的方式：预定义的颜色、十六进制、RGB代码 |
| background-image: url() | 背景图片 | url()内放图片路径，注意图片和当前html文件的上下级关系 |
| background-repeat | 背景平铺 | 值：repeat（默认）、no-repeat、repeat-x、repeat-y |
| background-position | 背景位置 | 两个值，有三种书写方式：都写坐标（x、y顺序不可颠倒）、都写方位名词、方位名词和坐标混写（顺序不可颠倒） |
| background-attachment | 背景附着 | 值：scroll（默认为背景滚动）、fixed（背景固定） |
| background: rgba() | 背景色半透明 | background: rgba(0,0,0,0.3) 第四个值代表的是透明度，处于0到1之间 |
| background | 背景复合写法 | 书写顺序：颜色、图片地址、平铺、滚动、位置 |
1）背景颜色 background-color
background-color: 颜色值;当没有设置颜色值的时候，默认是transparent（透明）。
2）背景图片 background-image
由于用图片链接会导致不好调整图片位置，所以一般会在实际开发中用background-image处理logo、一些装饰性的小图片、超大的背景图片。background-image的显著优点就是便于调整图片位置。
如果不使用background-image，则URL地址处默认为none，不插入图片。
background-image: url(图片的URL地址);比如将CSS.png图片插入到一个300px×300px的div盒子中：
3）背景平铺 background-repeat
如果需要在HTML页面上将背景图片多次展示（比如上图的CSS.png），就会用到background-repeat属性。
background-repeat:平铺的属性;| 平铺的属性 | 作用 |
| repeat | 背景图片在框内在横向和纵向上都平铺 |
| no-repeat | 背景图片不平铺 |
| repeat-x | 背景图片只在横向上平铺 |
| repeat-y | 背景图片只在纵向上平铺 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片--平铺</title>
<style>
div {
width: 1800px;
height: 1800px;
background-image: url(封面图片/CSS.png);
background-repeat: repeat;
/* 为了让900×900的范围可见，设置个天蓝的背景色 */
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4）背景位置 background-position
格式：
background-position: 参数x 参数y;参数x和参数y是x坐标和y坐标，可以使用方位名词或精确单位
| 参数值 | 说明 |
| length | 百分数，是由浮点数字和单位标识符组成的长度值 |
| position | 方位名词，有top、center、bottom、left、right |
注意：
- 情况1：参数是方位名词：
- 如果指定的两个值都是方位名词（position），则两个值的前后顺序无关，比如top left和left top的效果一样。
- 如果只指定了一个方位名词，另一个值省略不写，则第二个值默认居中对齐，比如只写right就会默认为right center。
- 情况2：参数是精确单位：
- 则第一个值必须要是x坐标，第二个值也必须是y坐标，两个值的顺序不能颠倒。
- 情况3：参数是混合单位：
- 则指定的两个值应该是精确单位和方位名词混合使用，第一个值是x坐标、第二个值是y坐标。
情况1：用方位名词呈现居中靠右的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置--靠右</title>
<style>
div {
width: 1800px;
height: 1800px;
background-image: url(封面图片/CSS.png);
background-repeat: no-repeat;
background-position: right;
/* 为了让900×900的范围可见，设置个天蓝的背景色 */
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
情况2：用精确单位控制图片位置的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置--精确移动</title>
<style>
div {
width: 1800px;
height: 1800px;
background-image: url(封面图片/CSS.png);
background-repeat: no-repeat;
/* 为了让900×900的范围可见，设置个天蓝的背景色 */
background-color: skyblue;
background-position: 20px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
情况3：精确单位和方向名词混用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置--混合单位</title>
<style>
div {
width: 1800px;
height: 1800px;
background-image: url(封面图片/CSS.png);
background-repeat: no-repeat;
/* 为了让900×900的范围可见，设置个天蓝的背景色 */
background-color: skyblue;
background-position: center 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5）背景附着 background-attachment
background-attachment设置背景图像的视差滚动效果，决定页面图像是否固定或随着页面的其余部分滚动。
格式：
background-attachment: 滚动参数;| 滚动参数 | 作用 |
| scroll | 背景图片随对象内容滚动 |
| fixed | 背景图像固定 |
不额外设置的话，背景图象默认的是scroll。
6）背景色半透明 background: rgba()
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha透明度，取值范围在0-1之间，0是透明，1是遮盖。
注意：背景半透明指的是盒子半透明，盒子里面的内容不受影响。
比如在div里写一句话，然后调整div的透明度，div盒子的透明度会变，而这句话的透明度不受影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色透明</title>
<style>
div {
width: 800px;
height: 500px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div>这是div盒子内部的内容</div>
</body>
</html>
背景复合写法
习惯性约定按以下顺序来写：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
比如：
原文地址：https://blog.csdn.net/m0_75036068/article/details/142365283
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！