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. 35）PHP，关于PHP和html

    (1)其实无论是CSS还是js,又或者是html,都是可以随意的载入到我们的php文件中,其实这些文件就是一个外来的引入文件,所以,根本没有什么神奇的, 你要是想把php的结果有调理的展示,那么就直接 ...

  2. rest framework-版本-长期维护

    ###############  版本   ############### # # 版本的问题: # rest_framework.versioning.URLPathVersioning # 一般就 ...

  3. iOS燃烧动画、3D视图框架、天气动画、立体相册、微信朋友圈小视频等源码

    iOS精选源码 iOS天气动画,包括太阳,云,雨,雷暴,雪动画. 较为美观的多级展开列表 3D立体相册,可以旋转的立方体 一个仪表盘Demo YGDashboardView 一个基于UIScrollV ...

  4. 奇点云数据中台技术汇（四）| DataSimba系列之流式计算

    你是否有过这样的念头:如果能立刻马上看到我想要的数据,我就能更好地决策?   市场变化越来越快,企业对于数据及时性的需求,也越来越大,另一方面,当下数据容量呈几何倍暴增,数据的价值在其产生之后,也将随 ...

  5. Springmvc+Mybatis+shiro整合

    Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络 ...

  6. Sampling Error|Sampling mean|population mean

    7.1 Sampling Error; the Need for Sampling Distributions 样本均值的三种表达: Sampling distribution of the samp ...

  7. 荼菜的iOS笔记--UIView的几个Block动画

    前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...

  8. [LC] 8. String to Integer (atoi)

    Implement atoi which converts a string to an integer. The function first discards as many whitespace ...

  9. linux debain systemd 开机启动 nodejs 兼容原initd启动 forever 开机自启

    布署环境为debian 7.5 布署到一台新机器,系统版本为debian 8.0 原启动项 /etc/init.d/mongo_service 开机居然无法自起 开机自启动不能用了,看页面输出就发觉不 ...

  10. Java IO: 字节和字符数组

    原文链接  作者: Jakob Jenkov   译者:homesick 内容列表 从InputStream或者Reader中读入数组 从OutputStream或者Writer中写数组 在java中 ...