CSS 图像精灵
图像精灵(Image Sprites)
图像精灵是放入一张单独的图片中的一系列图像。
包含大量图像的网页需要更长时间来下载,同时会生成多个服务器请求。
使用图像精灵将减少服务器请求数量并节约带宽。
图像精灵 - 简单的例子
我们使用这幅单独的图像 ("img_navsprites.gif"),而不是三幅独立的图像:
通过 CSS,能够只显示我们需要的图像部分。
在下面的例子中,CSS 规定要显示 "img_navsprites.gif" 图像的哪个部分:
实例
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
例子解释:
因为 src 属性不能为空,所有我们定义了一幅小的透明图像。而显示的图像将是我们在 CSS 中规定的背景图像:
<img class="home" src="img_trans.gif" />
定义我们希望使用的图像部分:
width:46px;
height:44px;
定义背景图像及其位置 (left 0px, top 0px):
background:url(img_navsprites.gif) 0 0;
这是使用图像精灵的最简单的方法,现在我们希望通过链接和 hover 效果来扩展它。
图像精灵 - 创建导航列表
我们希望使用图像精灵 ("img_navsprites.gif") 来创建导航列表。
我们将使用 HTML 列表,因为它们能够充当列表,同时也支持背景图像:
实例
#navlist {position:relative;}
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a {height:44px;display:block;} #home {left:0px;width:46px;}
#home {background:url('img_navsprites.gif') 0 0;} #prev {left:63px;width:43px;}
#prev {background:url('img_navsprites.gif') -47px 0;} #next {left:129px;width:43px;}
#next {background:url('img_navsprites.gif') -91px 0;}
例子解释:
把 position 设置为 relative 允许其中进行绝对定位:
#navlist {position:relative;}
外边距和内边距被设置为 0,去掉 list-style,并且所有列表项均为绝对定位:
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
所有图像的高度是 44px:
#navlist li, #navlist a {height:44px;display:block;}
现在开始定位并添加每个具体部分的样式:
定位到最左侧,图像宽度为 46px:
#home {left:0px;width:46px;}
定义背景图像及其位置 (left 0px, top 0px):
#home {background:url(img_navsprites.gif) 0 0;}
向右定位 63px (#home 宽度 46px + 项目之间的间隔),宽度是 43px:
#prev {left:63px;width:43px;}
定义背景图像向右移动 47px (#home 的宽度是 46px + 1px 的分隔线):
#prev {background:url('img_navsprites.gif') -47px 0;}
向右定位至 129px (从 #prev 的 63px 开始 + #prev 宽度 43px + extra space),宽度是 43px:
#next {left:129px;width:43px;}
定义背景图像向右 91px (#home width 46px + 1px line divider + #prev width 43px + 1px line divider ):
#next {background:url('img_navsprites.gif') no-repeat -91px 0;}
图像精灵 - Hover 效果
现在,我们希望向导航列表添加 hover 效果。
提示::hover 选择器用于在鼠标指针位于其上时选取元素。
提示::hover 选择器可用在所有元素上,不仅仅是链接。
我们的新图像 ("img_navsprites_hover.gif") 包含三幅导航图像,以及三幅用于 hover 效果的图像:
由于这是一幅单独的图像,而不是六个独立的文件,当用户将鼠标指针移动到图像上时,不会产生加载延迟。
为了添加 hover 效果,我们只加入了三行代码:
实例
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
例子解释:
对于所有三幅 hover 图像,我们规定了相同的背景位置,只是向下移动 45px:
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}
CSS 图像精灵的更多相关文章
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- css 图像热区
CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- CSS 图像大小
CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...
- CSS 图像
CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...
- CSS 图像拼合技术
CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...
- CSS 图像透明/不透明
CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. ...
- css图像拼合技术(精灵图)
CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...
- CSS:CSS 图像拼合技术
ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...
随机推荐
- CQL语句
CQL中默认忽略大小写,若需要大小写敏感,可使用双引号将对象包起来,引用的时候也要用双引号包住 tips: 使用CQL需要预装Python环境 Ⅰ.基本知识点 1.1 数据类型 这边和关系型数据库相近 ...
- [daily]gtk程序不跟随系统的dark主题
问题描述: 我的系统主题是dark的.在使用mysql-workbench是,里边的一些线条就跟随了系统文字的主要使用了灰白色. 这样在白色画布里就看不见这些线条了. 方法: 设置mysql-work ...
- Python Flask Restful
Flask Restful 1.flask restful 在flask基础上进行一些封装,主要用于实现restful接口 2.restful的理解 1)URI(统一资源标识符):每一个URI代表一 ...
- centos 7安装mysql 执行./scripts/mysql_install_db --user=mysql 报错 FATAL ERROR: please install the following Perl modules before executing ./scripts/mysql_install_db: Data::Dumper
[root@localhost mysql]# ./scripts/mysql_install_db --user=mysql FATAL ERROR: please install the fol ...
- Centos7安装并配置mysql5.6
1.下载安装包:https://pan.baidu.com/s/18xAumOggjm9bu9Wty6kYjg 2.卸载系统自带的Mariadb 2.1查询已安装的mariadb [root@loca ...
- Redis集群概述
Redis Cluster与Redis3.0.0同时发布,以此结束了Redis无官方集群方案的时代,目前,Redis已经发布了3.0.7版本. redis cluster是去中心化,去中间件的,也就是 ...
- SpringBoot单元测试
一.Service层Junit单元测试 需要的jar包 <dependency> <groupId>org.springframework.boot</groupId&g ...
- python多进程并发和多线程并发和协程
为什么需要并发编程? 如果程序中包含I/O操作,程序会有很高的延迟,CPU会处于等待状态,这样会浪费系统资源,浪费时间 1.Python的并发编程分为多进程并发和多线程并发 多进程并发:运行多个独立的 ...
- 取模性质,快速幂,快速乘,gcd和最小公倍数
一.取模运算 取模(取余)运算法则: 1. (a+b)%p=(a%p+b%p)%p; 2.(a-b)%p=(a%p-b%p)%p; 3.(a*b)%p=(a%p * b%p)%p; 4.(a^b)%p ...
- Laravel 安全:避免 SQL 注入
当你使用 Eloquent 查询时,如: User::where('name', $input_name)->first(); Eloquent 内部使用的是 PDO 参数绑定,所以你的请求是安 ...