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

<!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: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

比如：