没有合适的资源?快使用搜索试试~ 我知道了~
点击这里返回网页教学网 HTML教程 栏目.想浏览CSS教程请点这里。上文:标记语言——为文字指定CSS样式。Chapter 14 图片替换随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展
资源推荐
资源详情
资源评论
标记语言标记语言——图片替换图片替换
点击这里返回网页教学网 HTML教程 栏目.想浏览CSS教程请点这里。上文:标记语言——为文字指定CSS
样式。Chapter 14 图片替换随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,
达成相同目标的新方法,更好的方法也不断发展
点击这里返回我们 HTML教程 栏目.想浏览CSS教程请点这里。
上文:标记语言标记语言——为文字指定为文字指定CSS样式样式。 Chapter 14 图片替换
随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断
发展着.
"图片替换" 可以说是这种变革的最佳范例,这是用CSS把普通文字置换成图片的技术. 应该如何用CSS把文字换成图片?
如果能把表现用(不重要的或者装饰用的)的图片全放在CSS中是最好的,因为这样能够轻易替换更新过的图片,但却不用更改标
记源代码.同样,我们也能确保所有浏览器和设备能正确解析标记源代码的意义,不管有没有完全支持把文字替换成图片的进阶
CSS.在这本书中一直强调这样的优势. 没有完美的解决方案
然而,寻找单纯使用CSS将文字置换成图片的"完美"方式几乎跟寻找圣杯没啥两样...因为现在还不存在.仅有能在所有浏览器中
正常运作的方法,但是它无法配合辅助程序(比如屏幕阅读器)使用.还有其他能奏效的方法,除非使用者指定浏览器不显示任何图
片,但又启用CSS.
虽然在这段文字撰写的时候还没有能够满足所有人(或是所有使用者)的方法,但是这类方法现在的确有不少网站使用.在套用任
何图片置换法的时候都必须特别小心,同时也必须了解它会带来的副作用. 能用,但是要小心
这就是本章的目的,届时图片置换带来的便利性,但是相对的也会揭露它的缺点,随着时间的发展,或许会有更多CSS狂热者发现
能够做出相同效果的更好方法;在那之前,我们必须善用其中的技巧,衡量得失.
为了让你熟悉图片置换的概念,让我们看看几种常用的方法.先从Fahrner图片替换技巧谈起(Fahrner Image Replacement;FIR).
方法A: Fahrner图片替换(FIR)
以发现这个技巧的Todd Fahrner为名,FIR是用CSS的background(或background-image)属性把文字替换成图片的原始方法.
Douglas Bowman在2003年3月发表的极佳教学文件"Using Background-image to Replace Text"
(http://www.stopdesign.com/also/articles/replace_text)使这个方法大受瞩目.
让我们通过一个简单的例子,用FIR吧标题文字替换成图片. 标记源代码
接下来要用来做替换的标记源代码:
<h1 id="fir">Fahrner Image Replacement</h1>
这只是个简单的标题标签,里面有稍侯要用图片替换掉的文字.你会发现其中为<h1>标签指定的唯一的id,然我们稍后能用CSS完
全控制这个标题.
图14-1显示了一半浏览器查看这段源代码时的效果,用浏览器的预设值显示标题(在这个例子里是Verdana字体).
图14-1 标题的预设样式 额外的标签
FIR在标记源代码的标题标签之外还需要一组额外的标签包围文字.可以使用任何想要用的标签,但是<span>标签的通用性质使
它成为完成工作的最佳工具.不加上样式的时候,<span>对显示效果将不会有任何影响.
经过修改的标记源代码现在看起来变成这样:
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
现在我们放好了额外的<span>标签,准备加上CSS. CSS内容
方法A的精华是以所拥有的两组标签分别完成两份工作,接着将以<span>标签隐藏文字,再为<h1>标签加上样式,指定背景图片,
正是因为这两个步骤,所以会用到两组标签. 隐藏文字
首先,让用<span>标签的display属性把文字隐藏起来.
#fir span {
display: none;
}
这会把这个标题里的<span>标签里的文字完全隐藏起来,浏览器什么都不会显示,这是第一步,完全摆脱文字,不需要放上截图了,
你大概能想象,结果会是一片空白. 指定背景
先以Photoshop制作一个文字图片(图14-2),当然可以使用其他的图片编辑器完成相同的工作.留意图片的长宽,因为稍后就会用
上.
图14-2 fir.gif,用来替换掉文字的图片
图14-2这张图片的大小是287像素宽,29像素高,我们将把图片图图片的大小设定成<h1>标签的背景图片.
资源评论
weixin_38550722
- 粉丝: 8
- 资源: 928
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于matlab实现配电网三相潮流计算方法,对几种常用的配电网潮流计算方法进行了对比分析.rar
- 基于matlab实现配电网潮流 经典33节点 前推回代法潮流计算 回代电流 前推电压 带注释.rar
- 基于matlab实现模拟退火遗传算法的车辆调度问题研究,用MATLAB语言加以实现.rar
- 基于matlab实现蒙特卡洛的的移动传感器节点定位算法仿真代码.rar
- 华中数控系统818用户说明书
- 基于matlab实现卡尔曼滤波器完成多传感器数据融合 对多个机器人的不同传感器数据进行融合估计足球精确位置.rar
- 基于matlab实现进行简单车辆识别-车辆检测.rar
- 基于JSP物流信息网的设计与实现
- 基于matlab实现车牌识别程序,和论文,自己做的,做毕业设计的可以看看 .rar
- Windows系统下安装与配置Neo4j的步骤
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功