CSS 图像拼合技术（雪碧图）
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 图像拼合技术（雪碧图）的更多相关文章
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- CSS 图像拼合技术
CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...
- css图像拼合技术（精灵图）
CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...
- CSS：CSS 图像拼合技术
ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...
- 原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- 【Demo】CSS图像拼合技术
图像拼合 图像拼合 - 简单实例 <style> img.home { width: 46px; height: 44px; background: url(/images/img_nav ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- 简单的使用gulp生成雪碧图
有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
随机推荐
- Dcoker 部署Tomcat+redis+war
1.首先安装redis docker run –name my-redis -d redis 2.安装tomcat并启动 docker run -p 8383:8383 –name tomcat -v ...
- P2448 无尽的生命(树状数组+离散化）
题目描述 逝者如斯夫,不舍昼夜! 叶良辰认为,他的寿命是无限长的,而且每天都会进步. 叶良辰的生命的第一天,他有1点能力值.第二天,有2点.第n天,就有n点.也就是S[i]=i 但是调皮的小A使用时光 ...
- 关于Apache Commons-Lang3的使用
在日常工作中,我们经常要使用到一些开源工具包,比如String,Date等等.有时候我们并不清楚有这些工具类的存在,造成在开发过程中重新实现导致时间浪费,且开发的代码质量不佳.而apache其实已经提 ...
- 四剑客（sed）
一. sed sed简介: 用Linux环境中的编辑器程序来编辑文本文件.这些编辑器可以让你用简单命令或鼠标单击来轻松地处理文本文件中的文本.但有时候,你会发现需要自动处理文本文件,可你又不想动用全副 ...
- django框架进阶-使用缓存-长期维护
############### django-缓存页面 ############### ########################################### # 全站缓存, ...
- Array.prototype.slice.call()方法的理解
1.基础1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二 ...
- Xpath 入门教程
准备xml 文档 <?xml version="1.0" encoding="UTF-8"?> <bookstore> <book ...
- asp.net mvcview界面does not contain a definition
在cshtml使用linq操作数据集,自动补全是可以使用Select,但是一直提示System.Collection.GenericList' does not contain a definitio ...
- Dubbo的集群容错与负载均衡策略
Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...
- 编程原理—如何用javascript代码解决一些问题
关于编程,我最喜欢的就是解决问题.我不相信有谁天生具有解决问题的能力.这是一种通过反复锻炼而建立并维持的能力.像任何练习一样,有一套指导方针可以帮助你更有效地提高解决问题的能力.我将介绍5个最重要的软 ...