CSS高級技能:照片更换

2021-03-17 02:19 jianzhan

上1篇CSS实例教程 文章内容:CSS高級技能:CSS Sprites
图象更换技术性有非常的用途, 非常是重视视觉效果的设计方案, 并且在1定水平上也不容易危害非可视性化访问器的客户群(显示屏阅读文章器).
本节用到的照片仅有1个:
經典FIR
在文本外包上1组span标识, 并在CSS中将这个span开展display:none 实际操作, 使其掩藏, 随后在原文本的器皿的CSS中再加background-image, 以做到图象更换.
HTML编码以下:

<h3 id="header">
<span>Revised Image Replacement</span>
</h3>

CSS编码大概以下:

#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}

缺陷:
显示屏阅读文章器会略过界定 display:none 的器皿, 会致使那一部分客户没法获知当今的文本內容, 并且必须1个彻底沒有词义的span标识进行这个实际效果. 在关掉图象, 开启CSS的状况下, 客户得不到该有的內容. 单像素<img>更换
与經典FIR相近, 用span将文本掩藏, 而且在span外, 原父器皿中再加1个1像素全透明照片, 而且将被掩藏的文本加到该照片的alt特性中, 运用在照片不能用的状况下, 应用alt中的文本更换图象的基本原理, 应用户在关掉图象, 开启CSS的状况下也能获得文本信息内容.
HTML编码以下:

<h3 id="header">
<img src="shim.gif" alt="Revised Image Replacement" />
<span>Revised Image Replacement</span>
</h3>

CSS编码大概以下:

#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}

缺陷:
无词义标识. Radu 方式
与Phark方式相近, 根据授予文本1个外补钉来做到掩藏的实际效果. Radu只运作于IE5
HTML编码以下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS编码大概以下:

#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 ⑵000px;}

缺陷:
一样没法在关掉图象,打开CSS的状况下没法获得內容. Leahy/Langridge 方式
运用 overflow:hidden 和 padding 的特点,将文本做到掩藏的实际效果.
HTML编码以下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS编码大概以下:

#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}

缺陷:
一样在关掉图象,打开CSS的状况下没法获得內容, 并且因为IE的Box原形难题, 必须用到Hack. 详见译文. Phark 方式
运用 text-indent 的特点来做到掩藏文本的实际效果.
HTML编码以下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS编码大概以下:

#header {
text-indent: ⑴00em;
overflow: hidden;
background: url(sample-opaque.gif);
height: 25px;
}

缺陷:
一样不可以显示信息在关掉图象,打开CSS的状况下, 并且没法在IE5中运作. Phark 方式2
修补了Phark 1中Safari显示信息翻转条的难题, 和IE5中没法运作的难题.
HTML编码以下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS编码大概以下:

#header {
text-indent: ⑸000px;
background: url(sample-opaque.gif);
height: 25px;
}

缺陷:
一样不可以显示信息在: 关掉图象,打开CSS的状况下. Dwyer 方式
經典FIR的1种变体, 运用overflow:hidden 的特点, 使得全部机器设备都能获得信息内容, 包含非可视性化访问器.
HTML编码以下:

<h3 id="header">
<span>Revised Image Replacement</span>
</h3>

CSS编码大概以下:

#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: block;width: 0;height: 0;overflow: hidden;}

缺陷:
一样的不可以显示信息在: 关掉图象,打开CSS的状况下, 依然必须附加的无词义的span标识. Gilder/Levin 方式
处理了在关掉图象 打开CSS状况下的显示信息难题, 而且使得基本上全部的机器设备都可以以获得到文字信息内容.
HTML编码以下:

<h3 id="header">
<span></span>Revised Image Replacement
</h3>

CSS编码大概以下:

#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}

缺陷:
应用彻底空白的非词义标识span, 更换用照片假如是全透明情况的话, 文本没法被掩藏. Lindsay 方式
Lindsay将文本设定为1px, 并将文本色调设定成更换用照片情况的色调.
HTML编码以下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS编码大概以下:

#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}

缺陷:
只能用在单色情况的更换用照片的状况下, 并且在关掉图象 打开CSS的状况下一样没法获得信息内容. Shea 提升版
Shea为器皿再加了title特性, title中包括将被掩藏的文本, 根据这类方式来做到1种电脑鼠标激活专用工具提醒的1种实际效果来让客户获得信息内容.
HTML编码以下:

<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>

CSS编码以下:

#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}

缺陷:
过剩的空白无词义span标识...
以上基本上是现存全部的图象更换方式, 都有优缺陷, 依照自身的状况采用吧.
下1篇CSS实例教程 文章内容:CSS高級技能:拖动门