什么是css sprites(雪碧图)，css sprites使用的优缺点

站长手记作者： 2024-08-28 07:20:01

css sprites雪碧图：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量

什么是css sprites?

css sprites优点：

1、减少网页的HTTP请求，提高页面性能
2、图片命名上的困扰
3、更换风格方便

css sprites缺点：

1、必须限定容器大小，符合背景图片元素的位置，需要计算
2、维护比较麻烦

css sprites使用步骤：

css sprites应用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图实现原理</title>
</head>
<style>
    ul,h3{
        margin: 0;
        padding: 0;
    }
    h3{
        display: block;
        margin: 0;
        padding: 0;
    }
    .cat{
        position: relative;
        width: 150px;
        background-color: #f8f8f8;
        border: 1px solid #bbb;
    }
    li{
        z-index: 2;
        position: relative;
        display: block;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        margin: 1px 10px 0;
        vertical-align: bottom;
        border-bottom: 1px solid #dedede
    }
    li:hover{
        background-color:#666666;
    }
    li h3{
        font-size: 13px;
        font-weight: 400;
    }
    li i{
        display: inline;
        float:left;
        margin: 3px 10px 0 0;
        height: 24px;
        width: 30px
    }
    /* 在这里补充雪碧图的样式 */
    li>i{
        background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
    }
    .cat-2>i{
        background-position:0 -24px;
    }
    .cat-3>i{
        background-position:0 -48px;
    }
    .cat-4>i{
        background-position:0 -72px;
    }
    .cat-5>i{
        background-position:0 -96px;
    }
    .cat-6>i{
        background-position:0 -120px;
    }
    .cat-7>i{
        background-position:0 -144px;
    }
    .cat-8>i{
        background-position:0 -168px;
    }
</style>
<body>
<div class="cat">
    <ul>
        <li class="cat-1"><i></i><h3>服装内衣</h3></li>
        <li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
        <li class="cat-3"><i></i><h3>运动户外</h3></li>
        <li class="cat-4"><i></i><h3>珠宝手表</h3></li>
        <li class="cat-5"><i></i><h3>手机数码</h3></li>
        <li class="cat-6"><i></i><h3>家电办公</h3></li>
        <li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
        <li class="cat-8"><i></i><h3>母婴用品</h3></li>
    </ul>
</div>
</body>
</html>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69998.html