13.CSS-精灵图

最新推荐文章于 2021-07-17 16:55:50 发布

山楂不甜

最新推荐文章于 2021-07-17 16:55:50 发布

阅读量83

点赞数

分类专栏：笔记 css 文章标签： css3 html css

本文链接：https://blog.csdn.net/Veronnit/article/details/118728310

版权

CSS精灵图优化性能背景定位 HTTP请求

关键词由CSDN通过智能技术生成

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

31 篇文章 2 订阅

订阅专栏

文章目录

CSS精灵图

CSS精灵图

1.什么是CSS精灵图？

CSS精灵图是一种图像合成技术。

2.CSS精灵图的作用

可以减少请求的次数，降低服务器处理压力。

3.如何使用CSS精灵图的作用

CSS的精灵图需要配合背景图片和背景定位来使用。
配合画图工具来测量像素。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>41-CSS精灵图练习</title>
    <style>
        div{
            background-image: url(images/a-z.jpg);
            display: inline-block;
        }
        .box1{
            /*width: 110px;
            height: 143px;
            background-position: -560px -216px;*/
            width: 171px;
            height: 126px;
            background-position: -242px -532px;
        }
        .box2{
            /*width: 127px;
            height: 140px;
            background-position: -834px -217px;*/
            width: 164px;
            height: 134px;
            background-position: -588px -537px;
        }
        .box3{
            /*width: 124px;
            height: 144px;
            background-position: -264px -215px;*/
            width: 164px;
            height: 134px;
            background-position: -588px -537px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

山楂不甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13.CSS-精灵图

文章目录CSS精灵图1.什么是CSS精灵图？2.CSS精灵图的作用3.如何使用CSS精灵图的作用CSS精灵图1.什么是CSS精灵图？CSS精灵图是一种图像合成技术。2.CSS精灵图的作用可以减少请求的次数，降低服务器处理压力。3.如何使用CSS精灵图的作用CSS的精灵图需要配合背景图片和背景定位来使用。配合画图工具来测量像素。例如：<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫

专栏目录