雪碧图sprites

最新推荐文章于 2024-05-06 09:44:33 发布

Farer1

最新推荐文章于 2024-05-06 09:44:33 发布

阅读量58

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/farer1/article/details/121740338

版权

概念

是将多张图片组合在一张图片上，通过减少服务器的请求次数来优化页面

原理

ton过设置css样式的background-images和background-position 来实现元素（盒子）中显示的图标

步骤

差UN构建一个只能放一个图标大小的盒子（标签元素）
通过background-image引入雪碧图，在通过background-position跳转背景图片的显示位置

<style>
        div {
            width: 35px;
            height: 35px;
        }

        .box1 {
            background-image: url(images/un_login_third.png);
            background-repeat: no-repeat;
            background-position: -35px 0;
        }

        .box2 {
            width: 35px;
            height: 35px;
            background-color: pink;
            background-image: url(images/un_login_third.png);
            background-position: -35px -35px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>

示例：

备注：在央视中我们使用了一个叫做“鼠标悬停的效果选择器：hover”，表示当鼠标放置在元素上时触发的样式。

Farer1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
雪碧图sprites

概念是将多张图片组合在一张图片上，通过减少服务器的请求次数来优化页面原理ton过设置css样式的background-images和background-position 来实现元素（盒子）中显示的图标步骤差UN构建一个只能放一个图标大小的盒子（标签元素）通过background-image引入雪碧图，在通过background-position跳转背景图片的显示位置<style> div { width: 35px;
复制链接

扫一扫