Welcome to the website navigation,本站只接受合法正规的企业网站,欢迎站长们提交你的网站获得展示和流量有任何问题请联系站长,欢迎大家加入本站。

                
提交网站
  • 网站:76083
  • 待审:5
  • APP:577
  • 文章:304411
  • 会员:56004
文字内链包年1000元 文字内链包年1000元 文字内链包年1000元 AI办公网站 AI绘画工具 AIchat

名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。

  • 本篇文章具体介绍如下

上一篇 CSS教程 文章:CSS高级技巧:CSS Sprites
图像替换技术有相当的用处, 特别是注重视觉的设计, 而且在一定程度上也不会影响非可视化浏览器的用户群(屏幕阅读器).
本节用到的图片只有一个:
经典FIR
在文字外包上一组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 的容器, 会导致那部分用户无法得知当前的文字内容, 而且需要一个完全没有语义的span标签完成这个效果. 在关闭图像, 启用CSS的情况下, 用户得不到该有的内容. 单像素<img>替换
与经典FIR类似, 用span将文字隐藏, 并且在span外, 原父容器中加上一个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方法类似, 通过赋予文字一个外补丁来达到隐藏的效果. 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 -2000px;}

缺点:
同样无法在关闭图像,开启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: -100em;
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: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}

缺点:
同样不能显示在: 关闭图像,开启CSS的情况下. Dwyer 方法
经典FIR的一种变体, 利用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中包含将被隐藏的文字, 通过这种方法来达到一种鼠标激活工具提示的一种效果来让用户获取信息.
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标签...
以上几乎是现存所有的图像替换方法, 各有优缺点, 按照自己的情况选用吧.
下一篇 CSS教程 文章:CSS高级技巧:滑动门

CSS高级技巧:滑动门技术znTAIChat_企业网址导航_网址分类目录_企业黄页网址提交查询专业网站!

znTAIChat_企业网址导航_网址分类目录_企业黄页网址提交查询专业网站!

好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明,本站内容来源于互联网,如果侵犯了你的权益请联系本站删除。,教程,网站网页设计制作,网站网页设计,高级,技巧,

分享到:

  admin

注册时间:

网站:0 个   APP:3 个  文章:0 篇

  • 76083

    网站

  • 577

    APP

  • 304411

    文章

  • 56004

    会员

赶快注册账号,推广您的网站吧!
文章分类
热门网站
最新入驻APP小程序

宝贝市场2023-02-08

宝贝市场——买手和卖家商品展示

夺宝助手2023-02-08

夺宝助手小程序,查看每日快夺宝平

查诚信2023-02-08

查诚信是一款免费的商业查询工具

车价天天报2023-02-08

快速连接汽车销售,获知汽车最新报

考勤助理小程序2023-02-08

上班签到考勤,实时定位,后台轻松

汽车报价大全查询2023-02-08

汽车报价大全查询提供最新汽车市