背景图属性 - - 精灵图的使用

最新推荐文章于 2024-08-03 09:05:49 发布

是草莓味的啊

最新推荐文章于 2024-08-03 09:05:49 发布

阅读量299

点赞数

分类专栏： Web前端文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_43908649/article/details/120839106

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

什么是精灵图

精灵图（雪碧图，CSS Sprites）：图片整合技术，将若干小图标整合到一张大图片上，减少服务器接受和发送请求的次数，提高页面加载速度

制作精灵图

如何制作精灵图

从腾讯网获取精灵图

腾讯网网址
f12 - - 在样式中找到 .q-icons - - 腾讯网精灵图地址
右键 - - 将图像另存为 - - 引入工作区的images文件夹中

精灵图的应用

1.设置容器元素合适的宽度
2.设置容器元素的背景图为精灵图
3.设置容器元素的背景图位置x，y轴（x轴正数是往右移，负数是往左移，y轴正数往下移，负数往上移 ）

<!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>
        a{
            display: inline-block;  /*由于a是块级元素，要将其改成行级元素，才能显示到一行中*/
            border: 1px solid #000;
            height: 30px;           /* 需要设置宽高才能显示 */
            width: 30px;
        }
        .qzone{
            background-image: url(./images/0.png);   /* 将精灵图设置为背景图 */  
            background-size: 70px;                   /* 设置精灵图的大小 */
            background-position: 0px -174px;         /* 设置精灵图的位置,把相应图标移动到相应的位置 */
        }
        .email{
            background-image: url(./images/0.png);
            background-size: 70px;
            background-position: 3px -224px;
        }
    </style>
</head>
<body>
    <a class="qzone" href="#"></a>
    <a class="email" href="#"></a>
</body>
</html>