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 背景样式的分类

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	背景图片只在纵向上平铺

4）背景位置 background-position

格式：

background-position: 参数 x 参数 y;

参数 x 和参数 y 是 x 坐标和 y 坐标，可以使用方位名词或精确单位

参数值	说明
length	百分数，是由浮点数字和单位标识符组成的长度值
position	方位名词，有 top、center、bottom、left、right

注意：

1. 情况 1：参数是方位名词：
   • 如果指定的两个值都是方位名词（position），则两个值的前后顺序无关，比如 top left 和 left top 的效果一样。
   • 如果只指定了一个方位名词，另一个值省略不写，则第二个值默认居中对齐，比如只写 right 就会默认为 right center。
2. 情况 2：参数是精确单位：
   • 则第一个值必须要是 x 坐标，第二个值也必须是 y 坐标，两个值的顺序不能颠倒。
3. 情况 3：参数是混合单位：
   • 则指定的两个值应该是精确单位和方位名词混合使用，第一个值是 x 坐标、第二个值是 y 坐标。

情况 1：用方位名词呈现居中靠右的情况：

情况 2：用精确单位控制图片位置的情况：

情况 3：精确单位和方向名词混用

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 盒子的透明度会变，而这句话的透明度不受影响。

    
    
    
    



    
 这是 div 盒子内部的内容 

背景复合写法

习惯性约定按以下顺序来写：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

比如：