《
CSS高级技巧 图片替换》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334932013.htm
缺点:
同样不能显示在: 关闭图像,开启CSS的情况下. Dwyer 方法
经典FIR的一种变体, 利用overflow:hidden 的特性, 使得所有装备都能获守信息, 包含非可视化浏览器.
HTML代码如下:
<h3 id="header">
<span>,CSS高手必知10大秘籍;Revised Image Replacement</span>
</h3>
图像替换技巧有相称的用途, 特殊是注器重觉的设计, 而且在必定水平上也不会影响非可视化阅读器的用户群(屏幕阅读器).
本节用到的图片只有一个:
缺点:
同样在关闭图像,开启CSS的情况下无法获取内容, 而且因为IE的Box原型问题, 需要用到Hack,CSS页面布局中HTML结构化设计. 详见译文. Phark 方法
利用 text-indent 的特性来达到隐藏文字的效果.
HTML代码如下:
CSS代码大致如下:
CSS代码大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
<h3 id="header">
<img src="shim.gif" alt="Revised Image Replacement" />
<span>Revised Image Replacement</span>
</h3>
,CSS隐藏文字的几个方法;
缺陷:
过剩的空白无语义span标签...
以上多少乎是现存所有的图像替换方法, 各有优缺点, 依照本人的情况选用吧.
<h3 id="header">
<span></span>Revised Image Replacement
</h3>
缺点:
无语义标签. Radu 办法
与Phark方法类似, 通过赋予文字一个外补丁来达到隐藏的效果. Radu只运行于IE5
HTML代码如下:
<h3 id="header">
Revised Image Replacement
</h3>
缺点:
同样无法在关闭图像,开启CSS的情况下无法获取内容. Leahy/Langridge 方法
应用 overflow:hidden 以及 padding 的特征,将文字到达暗藏的后果.
HTML代码如下:
缺点:
同样的不能显示在: 封闭图像,开启CSS的情形下, 仍然须要额定的无语义的span标签. Gilder/Levin 方式
解决了在关闭图像 开启CSS情况下的显示问题, 并且使得简直所有的设备都能够获取到文本信息.
HTML代码如下:
缺点:
屏幕浏览器会略过定义 display:none 的容器, 会导致那局部用户无奈得悉当前的文字内容, 而且需要一个完整不语义的span标签实现这个效果. 在关闭图像, 启用CSS的情况下, 用户得不到该有的内容. 单像素<img>调换
与经典FIR相似, 用span将文字隐蔽, 并且在span外, 原父容器中加上一个1像素透明图片, 并且将被隐藏的文字加到该图片的alt属性中, 利用在图片不可用的情况下,CSS透明相关技巧的介绍, 应用alt中的文字替代图像的原理, 使用户在关闭图像, 启用CSS的情况下也能得到文字信息.
HTML代码如下:
CSS代码大致如下:
<h3 id="header">
<span>Revised Image Replacement</span>
</h3>
CSS代码大致如下:
#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺点:
同样不能显示在关闭图像,开启CSS的情况下, 而且无法在IE5中运行. Phark 方法2
修复了Phark 1中Safari显示转动条的问题, 跟IE5中无法运行的问题.
HTML代码如下:
<h3 id="header">
Revised Image Replacement
</h3>
CSS代码大抵如下:
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
<h3 id="header">
Revised Image Replacement
<,css透明滤镜 兼容ie6,ie7,ie8以及firefox;/h3>
CSS代码大致如下:
#header {
text-indent: -100em;
overflow: hidden;
background: url(sample-opaque.gif);
height: 25px;
}
毛病:
使用完全空缺的非语义标签span, 替换用图片假如是透明背景的话, 文字没措施被隐藏. Lindsay 方法
Lindsay将文字设置为1px, 并将文字色彩设置成替换用图片背景的颜色.
HTML代码如下:
<h3 id="header">
Revised Image Replacement
</h3>
CSS代码如下:
#header {width: 329px;height: 25px,CSS选择符详解;position: relative,CSS选择符详细说明;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}
CSS代码大体如下:
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: block;width: 0;height: 0;overflow: hidden;}
CSS代码大致如下:
#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;}
CSS代码大致如下:
#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%,CSS边框属性(border)的如何使用;height: 100%;}
--> [
网站建设之]CSS高级技巧:图片替换
在文字外包上一组span标签, 并在CSS中将这个span进行display:none 操作, 使其隐藏, 而后在原文字的容器的CSS中加上background-image, 以达到图像替换.
缺点:
只能用在纯色背景的替换用图片的情况下, 而且在关闭图像 开启CSS的情况下同样无法获取信息. Shea 增强版
Shea为容器加上了title属性, title中包括将被隐藏的文字,css语法结构, 通过这种方法来达到一种鼠标激活工具提醒的一种效果来让用户获守信息.
HTML代码如下:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
Tag：图片 技巧 高级 图片 ,
CSS设计网页头部的优化写法; 技能 高等
<h3 id="header">
Revised Image Replacement
</h3>
(责任编辑：网站建设)
CSS高级技巧 图片替换相关文章