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. vue2.XX 提示[Vue warn]: Error in render: "TypeError: Cannot read property 'img' of undefined"

    item 是向后台请求的一条数据,里面包含img,但是却提示img未定义 父组件向子组件传递数据时, 子组件 具体代码: <img :src="item.img" /> ...

  2. redis安装zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录

    问题: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录 解决方案:执行命令:make MALLOC=libc make MALLOC=libc

  3. Java中Date类型详解

    一.Date类型的初始化 1. Date(int year, int month, int date); 直接写入年份是得不到正确的结果的. 因为java中Date是从1900年开始算的,所以前面的第 ...

  4. vue element 关闭当前tab 跳转到上一路由

    方法一 this.$store.dispatch('delVisitedViews', this.$route); this.$router.go(-1); 方法二 this.$store.state ...

  5. MySQL5.7安装教程（RPM）

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 前言: 对应服务器信息: 192.168.247.53 一.MySQL安装(RPM) 1.系统环境设置: 1.1清空系统 ...

  6. javascript常用知识汇总

    javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这 ...

  7. 吴裕雄--天生自然python学习笔记：Python uWSGI 安装配置

    本文主要介绍如何部署简单的 WSGI 应用和常见的 Web 框架. 以 Ubuntu/Debian 为例,先安装依赖包: apt-get install build-essential python- ...

  8. 关于前端使用JavaScript无法实现canvas打印问题的解决

    当使用浏览器的打印功能window.print()无法打印网页上的canvas图像,但是可以通过转换canvas成一个图片的形式来实现canvas的打印. 解决方法 getElementById获取c ...

  9. windows下的tfjs-node安装异常总结

    大约有半年没有写博客了,奔波于上海这座魔都之中.险些忘了自己是个有梦想的全栈工程师 书接上回,由于个人非常厌恶python的语法,半年前发现了tensorflow.js这个宝贝(下简称tfjs),喜出 ...

  10. C\C++ 位域操作

    几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存对齐全攻略–涉及位域的内存 ...