zoukankan      html  css  js  c++  java
  • 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景

    (1). 静态图片。不随用户信息的变化而变化

    (2). 小图片。图片容量比較小

    (3). 载入量比較大

    一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图。


    2. 使用雪碧图能够降低http请求数量,加速内容显示。每请求一次,就会和server链接一次,建立链接时须要额外时间的。


    3. 实现原理

    使用background-position属性:


    须要使用雪碧图的时候,设置x和y的值就能够了。


    4. 实现方式:

    一种方式是使用PS手动拼图;

    还有一种方式是使用sprite工具自己主动生成一个大图,并返回了每个小图的坐标点,软件:CssGaga。


    5. 使用方式:

    在我们须要加入雪碧图的地方使用<i>标签(icon)。然后在样式中加入:

    i {
    	background:url(sp.pgn);
    	background-position:0 -10px;
    	float:left;
    	display:inline;
    	30px;
    	height:24px;
    }

    通过改变background-position中x和y的值来替换小图,注意x和y值都是小于等于0的值。


  • 相关阅读:
    开博说两句
    学习总结 (持续更新)
    ip代理 120203
    [vs2005]关于预编绎网站的问题[已预编译此应用程序的错误]
    JAVA类基础
    集合类和泛型
    IO流——字符流
    多线程和包
    多态和内部类
    抽象类与接口
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/6734090.html
Copyright © 2011-2022 走看看