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

时间: 2018-08-22阅读: 2022标签: css

什么是css sprites?

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


css sprites优点:

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


css sprites缺点:

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


css sprites使用步骤:

1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态


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>



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1026

CSS三大特性:层叠 继承 优先级

如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

CSS 技术技巧_提高你CSS技术的法则

CSS技术技巧法则:不要让你的代码脱离你的掌控,尽量简洁、掌握基础、保持代码的可复用性、面向对象的css、Css3了解他能做的以及你可以使用的部分、渐进增强与优雅降级、Css预处理工具...

CSS便捷开发小工具汇总

CSS便捷开发小工具汇总:包括:prefixfree前缀补全插件(或其他后缀-o-,-ms-,-moz-)、Normalize.css一个CSS Reset工具、Grunt 常用的包括CSS/JS的自动合并压缩, LESS/SASS 的自动编译等

Javascript可以控制css吗?

JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。

css常用代码

禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放;设置元素在另一个元素的最底部;设置背景颜色,不透明度

HTML/CSS中的空格处理_如何保留页面中的空格

在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了,同时内容前后的空格也会被清除。HTML空格保留的方式、CSS空格保留的方式。

如何编写轻量级 CSS 框架

我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。

CSS3 2D转换

转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!