css精灵图如何取图

最新推荐文章于 2024-07-29 20:12:23 发布

I am the sun?

最新推荐文章于 2024-07-29 20:12:23 发布

阅读量3k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/fighting_dream/article/details/113480994

版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

css精灵技术：将网页中的一些背景图像整合到一张大图中，减少请求服务器的次数。
精灵图的使用：
在这里插入图片描述
假如我想取这张图片的 q 出来，应该怎么办呢？
步骤一：打开firewords，将图片导入。

步骤二：点击右上角，如下图，将图片锁住，这样图片位置才不怕被移动。

步骤三：如下图

步骤四：观察左下方这些数值。前期工作做好啦
在这里插入图片描述
接下来，搞代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .q {
            /* 宽高和我们切片的宽高一样 */
            width: 81px;
            height: 59px;
            /* 背景图片就是整个大的精灵图，我们要的图片只要那张，所以no-repeat，网页，向右为正方向，向下为正方向，因此我们 */
            /* 像左定位和向上定位为负数。一般精灵图上去图片的坐标都是负数 */
            background: url(images/word1.jpg) no-repeat -253px -184px;
            /* 因为span为行内元素，不能设置宽高的，因此我们要把他转为行内快元素才行 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <span class="q"></span>
</body>
</html>