CSS Sprites的详细使用步骤

时间 2020-05-10

标签 css sprites 详细使用步骤栏目 CSS 繁體版

原文原文链接

1、把小图放在一张大图中，先排版好。上几张图看看，就好比这个：css

谷歌：html

淘宝：布局

土豆右下角悬浮框：性能

一、把用到的小图都放到了一张大图里，其中的小图之间的排版是有点规律的，好比说淘宝那张，相似的小图放置成同一列，这样就计算小图显示位置的时候，只要知道第一个小图的位置，同一列的小图，left（X坐标）同样，只须要改top（Y坐标）。这样就方便了许多。学习

2、使用大图。网站

在哪一个位置须要使用这个小图，就把大图做为background-images插入。而后来根据这个小图的大小调整left 和top。url

用到的css属性是background-image、background-position、background-repeat、这几个属性。spa

或者使用background这个复合属性写在一块儿就好。code

3、个人第一个demo，我必定要实现这样的效果htm

我先上张图说明我要作什么:

这个例子的意义是让我明白要怎么去显示想要的小图，没有其余的意义了哈哈。

个人思路是，ul li内内嵌一个<div></div>（固然li是块级元素）。

详细的布局代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    ul.ul1
    {
        width:200px;
        height:200px;
        
    }
    ul.ul1 li
    {
        height:40px;
        
    }
    .star
    {
        width:30px;
        height:18px;
        border:1px solid black;
        display:inline-block;                   /*将对象呈递为内联对象，可是对象的内容做为块对象呈递*/  /*这里使用是为了div跟li能不使用float属性处在同一行，最后div和li对其是用到inline-block属性*/
        vertical-align:top;
        
        background-image:url(images/minibar.png);                /*显示小图*/
        background-repeat:none;
        background-position:2px -55px;
    }
    .num9
    {
        width:30px;
        height:18px;
        border:1px solid black;
        display:inline-block;
        vertical-align:top;
        
        background-image:url(images/minibar.png);                /*显示小图*/
        background-repeat:none;
        background-position:-205px -20px;
    }
    </style>
</head>
<body>
<ul class="ul1">
    <li>项目一<div class="star"></div></li>
    <li>项目一<div class="num9"></div></li>
    <li>项目一</li>
    <li>项目一</li>
</ul>
</body>
</html>

小图完整出来了。

心得：

一、书写background-position时通常都是负值，由于是从大图的左上角做为（0,0）点。

二、以前没有学习css sprite以前，是想着怎么把一张大图不要的部分怎么遮挡掉。如今明白了是怎么回事。好比我上面要显示那朵小云，把大图放进div中，而后设置这个div的width和height，再定位一下background-position的位置。最后，大图就只在div中显示咱们须要的一小部分。

三、我还要深刻学习要怎么把小图排版好成一个大图，更容易测量位置，且不互相干扰。

3、为何要使用CSS Sprites

减小HTTP请求次数，从而提升了网站性能。

由于假设有6个小图，就有6个HTTP请求，可是若是是放在一个大图里，就只须要1次，由于你要的6个小图都在一张大图里，请求一次后不用再次发送HTTP请求去请求图片资源。