HTML/CSS/JS学习条记 Day6（CSS--C3 配景样式）

登录 · 发表于 2026-1-18 05:10:59

跟着该视频学习，记录条记：【黑马步调员pink老师前端入门教程，零底子必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day6 内容梳理：
目次
CSS 3.配景样式
3.0 配景样式的分类
1）配景颜色 background-color
2）配景图片 background-image
3）配景平铺 background-repeat
4）配景位置 background-position
5）配景附着 background-attachment
6）配景致半透明 background: rgba()
配景复合写法

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: 配景颜色配景图片地点配景平铺配景图像滚动配景图片位置
比如：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

HTML/CSS/JS学习条记 Day6（CSS--C3 配景样式）

本帖子中包含更多资源

尚未崩坏