仓酷云

标题: 今天来学习用CSS完成图片交换笔墨（Image replacement） [打印本页]

作者: 灵魂腐蚀 时间: 2015-1-16 10:36
标题: 今天来学习用CSS完成图片交换笔墨（Image replacement）
Div元素是用来为HTML文档内的内容提供结构和背景的元素。Div从起始到结束标签之间的所有内容都是用来构成这个块的，其中

不管是对扫瞄者仍是对搜刮引擎，笔墨都是最好的页面内容展现体例，可是，因为字体等缘故原由的限定，纯笔墨的展现垂垂没法满意爱漂亮的计划师的请求。
因而，呈现了经由过程CSS来完成用图片交换笔墨的办法，这类体例既能完成页面上各类丰厚的效果，又能满意seo的必要。因而，深受网页计划师的喜好，本文先容了几种罕见的图文交换手艺。

FahrnerImageReplacement(FIR)
Phark的办法
Gilder/Levin的办法(保举)

FahrnerImageReplacement(FIR)
这是最早呈现的图文交换手艺，是由ToddFahrner提出的，十分简单了解：
HTML代码：

<h2><span>HelloWorld</span></h2>

CSS代码：

<styletype="text/css">h2{background:url(hello_world.gif)no-repeat;width:150px;height:35px;}span{display:none;}</style>

代码十分分明：先将图片使用在H2的背景中，然后将SPAN的标签埋没。可是这类体例有个成绩，就是当图片没法显现时，将招致这个地区没有任何内容。同时，利用display:none的体例埋没的内容，将被很多支流屏幕浏览器疏忽，从而形成可用性成绩，因而，应当只管制止利用。
Phark的办法
这类手艺是由MikeRundle提出的，优点是不必要分外的标签：
HTML代码：

<h2>HelloWorld</h2>

CSS代码：

<styletype="text/css">h2{text-indent:-5000px;background:url(hello_world.gif)no-repeat;width:150px;height:35px;}</style>

代码也十分复杂，经由过程文本缩进，将笔墨埋没，可是，当图片没法显现时，仍然存在FIR的成绩。
Gilder/Levin的办法
这类手艺是由TomGilder和LevinAlexander配合提出的，这大概是一个最完美的图文交换手艺了：
HTML代码：

<h2><span></span>HelloWorld</h2>

CSS代码：

<styletype="text/css">h2{width:150px;height:35px;position:relative;}h2span{background:url(hello_world.gif)no-repeat;position:absolute;width:100%;height:100%;}</style>

起首，将H2的position设为relative，如许将使H2内里的元素定位以H2为参照，然后将SPAN元素相对定位，撑满全部H2地区，同时将背景图使用在SPAN标签内里；这类办法的道理是将SPAN标签掩盖在笔墨内容下面，一旦SPAN内里的背景图没法显现，将显现上层的笔墨内容，不影响一般利用。可是，此办法也有一个缺点，就是背景图不克不及通明，不然将显露出上面的笔墨。

接下来是布局思维方式，可能大家在接触DIV+CSS的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。

作者: 莫相离 时间: 2015-1-18 06:51
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 再见西城 时间: 2015-1-25 06:49
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 愤怒的大鸟 时间: 2015-2-2 17:57
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 小女巫 时间: 2015-2-8 04:16
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 海妖 时间: 2015-2-24 12:57
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 小妖女 时间: 2015-3-15 07:27
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 兰色精灵 时间: 2015-3-21 23:21
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

欢迎光临仓酷云 (http://ckuyun.com/)