【前端学习笔记】(八)（精灵图、背景图大小、文字阴影、盒子阴影、过渡）-CFANZ编程社区

一、精灵图

1.1 精灵图的介绍

➢ 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
➢ 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
➢ 例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1
关于图片的发送

1.2 精灵图的使用步骤

（1）创建一个盒子
（2）通过PxCook量取小图片大小，将小图片的宽高设置给盒子
（3）将精灵图设置为盒子的背景图片
（4）通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的 background-position：x y

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 18px;
            height: 24px;
            /* background-color: aqua; */
            background-image: url(./images/jinglingtu.png);
            /* 背景图位置属性: 改变背景图的位置 */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }
        b {
            display: block;
            width: 24px;
            height: 21px;
            /* background-color: aquamarine; */
            background-image: url(./images/jinglingtu.png);
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- 精灵图的标签都用行内标签 span, b, i -->
    <span></span>
    <b></b>
</body>
</html>

效果展示：
精灵图

二、背景图片大小

2.1 背景图片大小

➢ 作用：设置背景图片的大小，
➢ 语法：background-size：宽度高度；
➢ 取值

取值	场景
数字+px	简单方便，常用
百分比	相当于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

例子（数字+px）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: aqua;
            background-image: url(./images/MH/pic3_1.jpg);
            background-repeat: no-repeat;
            
            background-size: 200px;
           
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
图片缩放(数字+px)

例子（百分比）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: aqua;
            background-image: url(./images/MH/pic3_1.jpg);
            background-repeat: no-repeat;

            background-size: 60%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
图片缩放(百分比)

例子（contain ）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: aqua;
            background-image: url(./images/MH/pic3_1.jpg);
            background-repeat: no-repeat;
            /* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
图片缩放(contain )

例子（cover ）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: aqua;
            background-image: url(./images/MH/pic3_1.jpg);
            background-repeat: no-repeat;

            /* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
            background-size: cover;
            /* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
图片缩放(cover )

2.2 background连写拓展

➢ 完整连写：

background：color image repeat position/size;

➢ 注意点：
• background-size 和 background 连写同时设置时，需要注意覆盖问题
➢ 解决：
（1）要么单独的样式写在连写的下面
（2）要么单独的样式写在连写的里面

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
           
            /* 属性连写 background：color image repeat position/size; */
            background: skyblue url(./images/MH/pic3_1.jpg) no-repeat 50px 0/contain;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
图片缩放(属性连写)

三、文字阴影

➢ 作用：给文字添加阴影效果，吸引用户注意
➢ 属性名：text-shadow
➢ 取值：

参数	作用
h-shadow	必须写，水平偏移量，允许负值
v-shadow	必须写，垂直偏移量，允许负值
blur	可选，模糊度
color	可选，阴影颜色

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 30px;
            font-weight: 700;
            color: blue;
            text-shadow: 8px 10px 2px skyblue;
        }
    </style>
</head>
<body>
    <p>你好呀~</p>
</body>
</html>

效果展示：
文字阴影

四、盒子阴影

➢ 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
➢ 属性名：box-shadow
➢ 取值：

参数	作用
h-shadow	必须写，水平偏移量，允许负值
v-shadow	必须写，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

例子(内部阴影)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            
            /* 内部阴影 */
            box-shadow: 10px 15px 10px 5px skyblue inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示：
内部阴影

例子(外部阴影)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            
            box-shadow: 20px 30px 20px 10px skyblue;
             /* 注意: 外阴影, 不能添加outset, 添加了会导致属性报错，默认就是外阴影 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示：
外部阴影

五、过渡

➢ 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
➢ 属性名：transition
➢ 常见取值：

参数	取值
过度的属性	all：所有能过渡的属性都过渡、具体属性名如：width: 只有width有过渡
过渡的时长	数字+s（秒）

例子（一个属性时）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过度配合hover使用,谁变化谁加过度属性 */
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 宽度100，鼠标悬停的时候宽度300，花费1秒钟 */
            transition: width 1s;
        }
        .box:hover {
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
鼠标未悬停时：
鼠标未放上时
鼠标悬停时：

例子（两个属性）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过度配合hover使用,谁变化谁加过度属性 */
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 两个属性 */
            transition: width 1s,background-color 1s;
        }
        .box:hover {
            width: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：

鼠标未悬停时：
鼠标未放上时
鼠标悬停时：

例子（多个属性）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过度配合hover使用,谁变化谁加过度属性 */
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            /* 如果变化的属性多, 直接写all,表示所有 */
            transition: all 1s;
        }
        .box:hover {
            width: 300px;
            background-color: pink;
            background-image: url(./images/MH/pic3_2.jpg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>