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. [LC] 1002. Find Common Characters

    Given an array A of strings made only from lowercase letters, return a list of all characters that s ...

  2. LeetCode No.115,116,117

    No.115 NumDistinct 不同的子序列 题目 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且 ...

  3. 【UML】

    静态:类图,包图,部署图,构件图,对象图 行为:用例图,活动图,顺序图,状态图,交互图 [类图] http://www.uml.org.cn/oobject/201104212.asp [对象图] h ...

  4. CLOUD信用管理设置

    1.参数设置(管理员账户) 2.客户管理-信用管理设置 3.信用检查规则设置 4.信用档案设置 5.涉及集团公司,母公司与子公司的设置 6.信用档案-对象类型可为客户及集团客户 7.信用特批权限设置 ...

  5. 四剑客（sed）

    一. sed sed简介: 用Linux环境中的编辑器程序来编辑文本文件.这些编辑器可以让你用简单命令或鼠标单击来轻松地处理文本文件中的文本.但有时候,你会发现需要自动处理文本文件,可你又不想动用全副 ...

  6. 求求你，下次面试别再问我什么是 Spring AOP 和代理了！

    https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9403056301388627935% ...

  7. 解决centos6系统上python3—flask模块的安装问题

    Flask 是一个使用 Python 编写的轻量级 Web 框架(所以我们前面花了那么多时间安装 Python3 呀).它被称为微型架构,因为其使用非常简单的核心以及功能丰富的扩展.虽然 Flask ...

  8. 接口测试-chap6-获取页面动态token

    1.在发起某些请求时,可能会要求必须是从某个页面进行请求,此时会验证页面的token 2.这个token是动态生成的,每次请求时值都是不同的, 不可以通过fiddler抓取的值作为固定值传入,通过fi ...

  9. 对String类型的认识以及编译器优化

    Java中String不是基本类型,但是有些时候和基本类型差不多,如String b = "tao" ; 可以对变量直接赋值,而不用 new 一个对象(当然也可以用 new). J ...

  10. drf三大认证

    源码分析 """ 1)APIView的dispath(self, request, *args, **kwargs) 2)dispath方法内 self.initial( ...