1、css 图像拼合

  • 图像拼合就是单个图像的集合。
  • 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
  • 使用图像拼合会降低服务器的请求数量，并节省带宽。

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style>

        body{

            margin:0;

        }

        .box{

            width:500px;

            margin:0 auto;

            overflow:hidden;

        }

        .btm{

            background:url(images/img_navsprites_hover.gif) no-repeat;

            width:43px;

            height:44px;

            display:block;

            float:left;

            margin-left:10px;

        }

        .pp1{

            background-position:-47px 0;

        }

        .pp2{

            background-position:-91px 0;

        }

        .pp3{

            background-position:0 0;

        }

        .pp1:hover{

            background-position:-47px -45px;

        }

        .pp2:hover{

            background-position:-91px -45px;

        }

        .pp3:hover{

            background-position:0 -45px;

        }

        .btn{

            width:200px;

            margin:200px auto;

        }

        .btn i{

            background:url(images/pwd-icons-new.png) no-repeat -48px -96px;

            display:block;

            width:38px;

            height:38px;

            background-color:blue;

        }

        .first{

            width:200px;

            margin:20px auto;

        }

        .first i{

            width:24px;

            height:30px;

            display:block;

            background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -440px;

        }

        .one{

            width:200px;

            margin:20px auto;

        }

        .one i{

            width:16px;

            height:17px;

            display:block;

            background:url(images/toolbars.png) no-repeat -96px -212px;

        }

    </style>

</head>

<body>

    <div class="box">

        <span class="btm pp1"></span>

        <span class="btm pp2"></span>

        <span class="btm pp3"></span>

    </div>

    <div class="btn">

        <i></i>

    </div>

    <div class="first">

        <i></i>

    </div>

    <div class="one">

        <i></i>

    </div>

</body>

</html>
  • float改变背景

效果图：

持续更新，多多关照！

CSS 图像拼合技术（雪碧图）的更多相关文章

  1. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  2. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  3. css图像拼合技术（精灵图）

    CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...

  4. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  5. 原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

  6. 【Demo】CSS图像拼合技术

    图像拼合 图像拼合 - 简单实例 <style> img.home { width: 46px; height: 44px; background: url(/images/img_nav ...

  7. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  8. 简单的使用gulp生成雪碧图

    有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...

  9. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

随机推荐

  1. 二十九、rsync+inotity实时监控同步工具

    一.场景应用:                                    客户通过url访问资源(查询,下载等),并发量是非常高的,所以运用负载均衡分担web服务器的压力,在后端连接不同的 ...

  2. Dcoker 部署Tomcat+redis+war

    1.首先安装redis docker run –name my-redis -d redis 2.安装tomcat并启动 docker run -p 8383:8383 –name tomcat -v ...

  3. 2019-2020-1 20199324《Linux内核原理与分析》第三周作业

    第二章 操作系统是如何工作的 一.知识点总结 1.计算机的三个法宝 存储程序计算机 函数调用堆栈机制.堆栈:是C语言程序运行时必须使用的记录函数调用路径和参数存储的空间. 中断 2.堆栈相关的寄存器和 ...

  4. 吴裕雄--天生自然python Google深度学习框架：Tensorflow基础应用

    import tensorflow as tf a = tf.constant([1.0, 2.0], name="a") b = tf.constant([2.0, 3.0], ...

  5. 微信中的APP、公众号、小程序的openid及unionid介绍

    微信中的APP.公众号.小程序的openid及unionid介绍 1.unionid 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只 ...

  6. ArcGIS自定义坐标变换中的方法说明

    在10.1里面,一共提供了12种转换的方法,如下: Ø  Geocentric_Translation Ø  Molodensky Ø  Molodensky_Abridged Ø  Position ...

  7. js正则表达式常用的大部分函数

    1.)String方法a.)String.search()参数:可以是正则表达式也可以是普通的字符串.返回值:如果找到匹配则返回首字符的索引位置,找不到则返回-1var s = "Hello ...

  8. php配置memcached的扩展。

    (一)安装memcached服务器 1根据系统下载相应版本的memcached服务器版本:如win7(64位=====>memcached-win64/memcached.exe 2.解压到目录 ...

  9. 《hdu 免费馅饼》

    题目描述 免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  10. 修改 commit message

    本文为原创文章,转载请标明出处 目录 修改上一条提交的 commit message 修改之前提交的 commit message 1. 修改上一条提交的 commit message git com ...