CSS——精灵图与背景图片定位

最新推荐文章于 2023-11-26 00:20:47 发布

weixin_30559481

最新推荐文章于 2023-11-26 00:20:47 发布

阅读量290

点赞数

原文链接：http://www.cnblogs.com/wuqiuxue/p/7802508.html

版权

精灵图产生背景：

1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）

精灵图的定义：

1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。

2、背景定位的方式主要通过控制x和y轴的值。

精灵图使用技巧：

1、一般情况：直接一个盒子，里面的背景图片是精灵图，使用时注意x轴和y轴。

2、特殊情况：盒子中有一个小图标，此时，小图标外套一个标签（i标签或者span），给小图标设置定位后（自动转成行内块）定义宽高，这个宽高就是精灵图中的小图的宽高，然后注意x轴和y轴的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 68px;
            height: 30px;
            background: url("qq.png") -877px -201px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

转载于:https://www.cnblogs.com/wuqiuxue/p/7802508.html

weixin_30559481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——精灵图与背景图片定位

精灵图产生背景：1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）精灵图的定义：1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。2、背景定位的方式主要通过控制x和...
复制链接

扫一扫