【CSS 图像精灵】的更多相关文章

CSS 图像精灵

图像精灵(Image Sprites) 图像精灵是放入一张单独的图片中的一系列图像. 包含大量图像的网页需要更长时间来下载,同时会生成多个服务器请求. 使用图像精灵将减少服务器请求数量并节约带宽. 图像精灵 - 简单的例子 我们使用这幅单独的图像 ("img_navsprites.gif"),而不是三幅独立的图像: 通过 CSS,能够只显示我们需要的图像部分. 在下面的例子中,CSS 规定要显示 "img_navsprites.gif" 图像的哪个部分: 实例 im…

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

本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术.CSS Sprites这个词如果直译的话是”CSS精灵”的意思,它显然无法表达其技术的内涵.通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”.无论怎么叫,它的技术核心是不变的. 您还可以参考以下J…

css 图像热区

CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. demo: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图像热区</title> </head…

CSS 图像居中对齐

CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <html>     <head>         <title>图像居中</title>         <meta charset="UTF-8">         <style type="text/css"&g…

CSS 图像大小

CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像素. 示例 <!DOCTYPE html> <html>     <head>         <title>图像大小</title>         <style type="text/css">    /*图像尺寸…

CSS 图像

CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像素. 示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html>     <head…

CSS 图像拼合技术

CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - 简单实例 与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif"): 有了CSS,我们可以只显示我们需要的图像的一部分. 在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分: img.home { w…

CSS 图像透明/不透明

CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. 首先,我们将向您展示如何用CSS创建一个透明图像 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明. Opacity…

css图像拼合技术（精灵图）

CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有了css样式,我们可以显示我们需要的图像的一部分 详细代码如下: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>图片整合</title> &l…

CSS：CSS 图像拼合技术

ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合 - 简单实例 与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif"): 有了CSS,我们可以只显示我们需要的图像的一部分. 在下面的例子CSS指定显示 "img_navsprites.gi…