HTML5第四天笔记01——精灵图片

最新推荐文章于 2024-07-12 19:29:32 发布

·青红造了个白·

最新推荐文章于 2024-07-12 19:29:32 发布

阅读量276

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119119919

版权

<!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>Document</title>
    <style>
        p{
            /* 使用精灵图片中某个具体图片需要测出它的坐标和长宽 */
            background:url("icons_5859e57.png") -767px -191px;
            width:15px;
            height: 13px;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

精灵图片：把很多小图片整合到一张大图片上的的技术。减少服务器请求次数。

                img与background区别？

                img一般用来引入比较重要的图片，能被搜索引擎抓取，占位

                background一般用来引入装饰性图片，不能被搜索引擎抓取，不占位

测量的工具可以推荐使用“PxCook”

精灵图片例子