CSS图像拼合技术

1.图像拼合

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

图像拼合实例

  • 有了css样式，我们可以显示我们需要的图像的一部分

详细代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>图片整合</title>

    <style>

        .box{

    width:200px;

    margin:0 auto;

    overflow:hidden;

}

.iton{

    width:43px;

    margin-left:10px;

    height:44px;

    float:left;

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

}

.span01{

    background-position:0 0;

}

.span02{

    background-position:-47px 0;

}

.span03{

    background-position:-91px 0;

}

.span01:hover{

    background-position:0 -45px ;

}

.span02:hover{

    background-position:-47px -45px ;

}

.span03:hover{

    background-position:-91px -45px ;

}

    </style>

</head>

<body

<div class="box">

        <span class="iton span01"></span>

        <span class="iton span02"></span>

        <span class="iton span03"></span>

    </div>

<body>

</html>

运行结果如下图：

  • 这个效果加了一个悬浮样式
  • 鼠标悬停到元素上，设置background-position 的位置来改变图片的位置

持续更新，欢迎大家指教！

css图像拼合技术（精灵图）的更多相关文章

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

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

  2. CSS 图像拼合技术

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

  3. CSS：CSS 图像拼合技术

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

  4. CSS 图像拼合技术（雪碧图）

    1.css 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 代码如下: <!docty ...

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

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

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

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

  7. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  8. CSS雪碧图（精灵图）使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  9. CSS精灵图(王者荣耀案例)

    首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加 ...

随机推荐

  1. 大数据笔记（八）——Mapreduce的高级特性（A）

    一.序列化 类似于Java的序列化:将对象——>文件 如果一个类实现了Serializable接口,这个类的对象就可以输出为文件 同理,如果一个类实现了的Hadoop的序列化机制(接口:Writ ...

  2. 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

  3. Taylor Swift -《Fearless》

    最近网上都搜不到Taylor的歌了,分享一张love best的album给大家,支持霉霉的还是去买正版把~ 专辑曲目: 01. “Jump Then Fall” 03:5702. “Untoucha ...

  4. Eclipse的switch workspace 选项中删除多余的workspace

    方法1 Eclipse图形化工具: 打开Eclipse后,选择功能菜单里的Windows->Preferences->,弹出对话框后,选择General->Startup and S ...

  5. 011-Spring Boot 运行流程分析SpringApplication.run

    一.程序入口 1.1.静态方法 //直接调用run方法 ConfigurableApplicationContext context = SpringApplication.run(App.class ...

  6. Delphi XE2 之 FireMonkey 入门(23) - 数据绑定: TBindingsList: TBindExpression

    准备用 TBindingsList 重做上一个例子. 可以先把 TBindingsList 理解为是一组绑定表达式(TBindExpression)的集合;官方应该是提倡在设计时完成 TBindExp ...

  7. 只有一个form 的程序， onactivate 只触发一次。

    https://blog.csdn.net/saint13/article/details/454615 Form的onActivate事件 2005年08月15日 01:08:00 阅读数:3406 ...

  8. python 正则表达式 re.findall &re.finditer

    语法: findall 搜索string,以列表形式返回全部能匹配的子串 re.findall(pattern, string[, flags]) finditer 搜索string,返回一个顺序访问 ...

  9. 【EWM系列】SAP 关于EWM的WT增强简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 关于EWM的WT增强简介   ...

  10. TensorFlow学习笔记7-深度前馈网络(多层感知机)

    深度前馈网络(前馈神经网络,多层感知机) 神经网络基本概念 前馈神经网络在模型输出和模型本身之间没有反馈连接;前馈神经网络包含反馈连接时,称为循环神经网络. 前馈神经网络用有向无环图表示. 设三个函数 ...