css之sprite（图片精灵）

最新推荐文章于 2024-05-20 17:26:33 发布

不想有bug的小菜鸟

最新推荐文章于 2024-05-20 17:26:33 发布

阅读量251

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_45030966/article/details/119718676

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用CSS Sprites能很好地减少网页的http请求，允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

主要利用的是CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

下面举出具体例子

通过使用图片精灵，完成对图片中第一列的图标进行定位

<!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>图标</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body>div {
            padding-left: 0;
            width: 180px;
            background-color: #bbb;
            padding: 20px;
        }
        
        body>div>div {
            height: 145px;
            width: 40px;
            background-origin: padding-box;
            border-radius: 50%;
            margin-bottom: 20px;
            padding-left: 115px;
            background-image: url('../../img/sprites.jpg');
        }
        
        body>div>div:nth-child(1) {
            background-position: -121px -129px;
        }
        
        div>div:nth-child(2) {
            background-position: -121px -300px;
        }
        
        div>div:nth-child(3) {
            background-position: -121px -477px;
        }
        
        div>div:nth-child(4) {
            margin: 0;
            background-position: -121px -653px;
        }
    </style>
</head>

<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>

</html>

结果：

不想有bug的小菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之sprite（图片精灵）

用CSS Sprites能很好地减少网页的http请求，允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。主要利用的是CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。下面举出具体例子通过使用图片精灵，完成对图片中第一列的图标进行定位
复制链接

扫一扫