HTML入门（精灵图）————DAY5

最新推荐文章于 2024-09-13 16:35:28 发布

好吃的都给你呀

最新推荐文章于 2024-09-13 16:35:28 发布

阅读量373

点赞数

分类专栏：前端杂文文章标签： HTML 精灵图

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102582919

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

精灵图就是把一个图标或者小图画做到一张图里，方便调用。效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>精灵图</title>
    <style>
        body{
            background-image: url(../前端/img图片库/2.jpg);
            background-size: 100% 100%;
            /* 锁定，不会跟随屏幕移动而改变看到的内容 */
            background-attachment: fixed;
            /* 默认格式为 当图片大小和所属框的大小不一样时，会进行重叠而填充满整个图像
            当进行no-repeat设置后，图像大小会变成背景大小，而不会进行填充 */
            background-repeat: no-repeat;
        }
        /* 当class设置3个类时，可利用同样的类来设置相同的属性，再利用不同的类来设置各自的属性 */
        .d1{
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            border-radius: 50%;
        }
        .d2{
            background-image: url(../前端/img图片库/精灵.jpg) !important;
            /* 这一步也很重要，百分比的设置决定于你所选用的精灵图的分格
            比如你的精灵图为 横排有6个图像，竖排有4个图像时，就设置为下面的格式
            以此来得到一个框内只会出现其中一个小图像 */
            background-size: 600% 400%;
        }
        .dd1{
            /* 与上年说的类似，如果不如下面这样的设置，会默认左上角的那个小图像
            当进行选择其他图像的时候，用-值来进行图像的向右选择
            其实也就是将图像向左移动了，视觉效果上相当于向右移动了 */
            background-position: -100% -100%;
        }
        .dd2{
            background-position: -200% -300%;
        }
    </style>
</head>
<body>
    <div class="d1 d2 dd1"></div>
    <div class="d1 d2 dd2"></div>

</body>
</html>