HTML5、CSS雪碧图

最新推荐文章于 2024-10-07 14:57:45 发布

枕梦

最新推荐文章于 2024-10-07 14:57:45 发布

阅读量1.9k

点赞数

分类专栏： HTML5+CSS 文章标签： css 移动图片雪碧图

本文链接：https://blog.csdn.net/qq_37768482/article/details/70182732

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

所谓的雪碧图就是在一整张图片中分割出自己想要的部分，也可理解为图片截取（坐标的移动）

利用background-position属性，改变图片的位置（想要的图片的移动位置）

图片截取都是从左上角的（0,0）坐标开始，所有需要把所需的图片移动想左、上移动，移动到所截取的图片的位置即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*空格  ：后代选择器（所有后代）*/
        #container div{
            width: 25px;
            height: 25px;
            color: red;
            background-image: url("../../img/icon.gif");
            background-repeat: no-repeat;
        }
        #div2{
            background-position:-42px 0;
        }
        #div3{
            background-position: -165px -25px;
        }
        #div4{
            background-position: 0 -169px;
        }
        #div5{
            background-position: -23px -288px;
        }

    </style>
    <title>雪碧图</title>
</head>
<body>

<div id="container">
    <div></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
</div>

</body>
</html>