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. SAP PM：参考维护工单创建测量凭证

    (1)使用FM:CO_BC_ORDER_POST获取工单资料(Aufnr, aufpo and materials etc): (2)使用FM:MEASUREM_DOCUM_RFC_SINGLE_00 ...

  2. 浅谈PHP小马免杀

    在渗透测试过程初期,上传小马,拿到 webshell 再进行下一步的操作,现如今的网站安全更多是 一些云防护.CDN防护.服务器安全软件等等,给渗透测试.提权等带来了一定难度的提升, 今天探讨一下如何 ...

  3. 各大厂RTSP取流的URI

    目前使用过的各大厂商取流规则是在实际的工作中遇到的相关视频接入问题,通过rtsp协议接入视频数据的一些记录,其中的图片可能来源于网络,内容部分来源于网络,本人仅仅是对相关内容作了汇总. 海康RTSP取 ...

  4. Windows下 webstorm安装tomcat配置svn并使用

    先附上所需要的软件的下载地址:https://pan.baidu.com/s/1c2ripd2 1.下载并安装jdk以及配置jdk的环境变量 1)下载jdk,选择安装目录安装,我选择的是默认路径,安装 ...

  5. Rearrangement

    In a two dimensional array of integers of size 2×n2 \times n2×n, is it possible to rearrange integer ...

  6. python3多线程应用详解（第四卷：图解多线程中LOCK）

    先来看下图形对比: 发现没有这种密集型计算的任务中,多线程没有穿行的速率快,原因就是多线程在线程切换间也是要耗时的而密集型计算任务执行时几乎没以偶IO阻塞,这样你说谁快

  7. 系统学习javaweb1----HTML语言1

    自我感受:HTML语言没想到也有这么大的学问,竟然能通过超链接标签直接访问百度,这可让我大吃一惊,我也得反思一下自己,上学期的java纯是混过来的,没有系统的学习过,感觉能通过期末考试都是侥幸,接下来 ...

  8. 蓝桥杯-PREV45-图形排版

    这是2017年蓝桥杯C组C++的压轴题,拿到之后没什么想法.但是蓝桥杯有部分分.所以直接敲了个大暴力提交上去过了一半的数据.后来想到了DP,但是没能实现出来,感觉还是有问题的.后来看了解题视频发现是预 ...

  9. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  10. 安装与使用django-restframework

    django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用 在settings.py中注册: INSTA ...