使用背景图像替换文本（FIR）等。 [英] Using Background-Image to Replace Text (FIR) etc..
问题描述
据我所知，在视觉启用的CSS浏览器中使用FIR *替换带有
图像的标题标签现在不受欢迎了。
基础，一些屏幕阅读器将* * *读回由CSS标记为
的文本为隐形或隐藏。
所以。 ..
如果我想用图像替换标题（因为我的客户希望
尽可能使用他的特定字体标题），那是什么最好的
的方式吗？
很明显，我可以使用带有相关alt标签的img标签，但这会丢失
我H标签给我的重要性结构，反过来，
失去了层次结构完整性，更重要的是，b
精确的搜索引擎解释。
更详细：
在下面的代码片段中，''MainTitle8''和''SubTitle5''是标题
应该具有H1和H2的重要性特别是。
< div id =" content-text">
< p>< img src =" images / MainTitle8。 GIF" />< / p>
< p>< img src =" images / Recette1.jpg" />< / p>
< p> Marc Wery，Professeur de Cuisine。 < br />
Conseiller Culinaire。 < br />
Finaliste du Grand Prix Escoffier 1995.< br />
$ b $b3émeauTrophéeEuropéen1995。< / p>
< img src =" images / SubTitle5.gif"对齐= QUOT;左" />
< p>& nbsp;< / p>
< img src =" images / Recette2.jpg"类= QUOT; imgLeftFloat" />
等等
有了FIR，我会做类似......
< div id =" content-text">
< span>< h1 class =" swap">我的主标题< / h1>< / span>
< p>< img src =" images / Recette1.jpg" />< / p>
< p> Marc Wery，Professeur de Cuisine。 < br />
Conseiller Culinaire。 < br />
Finaliste du Grand Prix Escoffier 1995.< br />
$ b $b3émeauTrophéeEuropéen1995。< / p>
< span>< h2" class = swap">我的子标题< / h2>< / span>
< p>& nbsp;< / p>
< img src =" images / Recette2.jpg"类= QUOT; imgLeftFloat" />
...等
....和CSS一样...
h1.swap {
身高：22px;
背景重复：不重复;
}
h1.swap span {display ：没有;}
h2.swap {
身高：18px;
背景重复：无重复;
}
h1.swap span {display：none;}
h1＃content-text {
background-image ：url（" images / MainTitle8.gif"）;
}
h2＃content-text {
background-image：url（ " images / SubTitle5.gif"）;
}
...等
这样，支持CSS的可视化浏览器会得到
标题的图像，其他任何东西都会得到普通的老H1或H2。
现在，我收集，那是'不 - 现在，因为有些屏幕阅读器会执行
解释CSS，所以不会看到隐藏的H标签。
其他人怎么做？
*（Fahrner图像替换 - 见
http://www.stopdesign.com/articles/replace_text/ 对于一个更好的
解释比我能给的）
干杯
-
查理
Charlie King写道：
据我了解，使用FIR *在视觉启用的CSS浏览器中用标题替换标题标签现在不赞成基于某些屏幕阅读器* * *读回由CSS标记的文本为隐藏或隐藏。
所以...
如果我想用图像替换标题（因为我的客户希望在可能的情况下使用他的特定字体标题） ），最好的方法是什么？
很明显，我可以使用带有相关alt标签的img标签，但这会失去我的重要性结构H标签会给我哪个失去了层次结构完整性，更重要的是，准确的搜索引擎解释。
如果你把它们标记为
< h1>< img src =" ..." alt =" MainTitle8">< / h1>
更详细：
在下面的代码段中，''MainTitle8''和''SubTitle5''是分别应该具有H1和H2重要性的标题。
< div id =" content-text">
< p>< img src = QUOT;图像/ MainTitle8.gif" />< / p>
< p>< img src =" images / Recette1.jpg" />< / p>
< p> Marc Wery，Professeur de Cuisine。 < br />
Conseiller Culinaire。 < br />
Finaliste du Grand Prix Escoffier 1995.< br />
3 ?? me au Troph ?? e Europ ?? en 1995.< / p>
< img src =" images / SubTitle5.gif"对齐= QUOT;左" />
< p>& nbsp;< / p>
< img src =" images / Recette2.jpg"类= QUOT; imgLeftFloat" />
......等
对于FIR，我会做类似......
< div id =" content-text"> ;
< span>< h1 class =" swap">我的主标题< / h1>< / span>
你不能把< h1>在一个< span>
...和CSS之类的... ...
h1.swap {
高度：22px;
背景重复：不重复;
}
h1.swap span {display：none;}
这意味着跨度在h1内部（它应该在
外面就像你的html说的那样）
h1＃content-text {
background-image：url（" images / MainTitle8.gif"）;
}
你的CSS对你的HTML不正确。上面的选择器必须是div＃content-text h1。而不是h1＃content-text。
这样，支持CSS的可视化浏览器将获得
标题的图像，而其他任何东西都将获得普通的H1或H2。
您必须将高度设置为h1，因为我认为它会在没有内容的情况下崩溃。
现在，我收集，现在是不行的，因为有些屏幕阅读器会解释CSS，所以不会看到隐藏的H标签。
显示：一般都没有读取，所以确实没有。
其他人怎么做？
就像我说的那样：
< h1>< img src =" image.jpg" alt ="替换图片中的标题">< / h1>
*（Fahrner图片替换 - 请参阅
http://www.stopdesign.com/articles/replace_text/ 获得比我能给出的更好的解释<） / blockquote>
正如他们在该页面上所说：
"本文正文中描述的原始技术（FIR）是
不再推荐使用，因为它使隐藏文本完全无法访问某些屏幕阅读器无法访问。相反，请参阅文章末尾提到的
替代技术之一
a ??重要的Notesa ??。
我不喜欢那些重要的
笔记部分中的三种替代方法。诀窍越少，imo越好。
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？£。 O resto ?? crisfeito。
- Renato Russo -
2006年1月14日星期六15:51:09 +0100，
< 1t ****************************** @ 40tude.net>
（comp .infosystems。 www.authoring.stylesheets ）Els
< el*********@tiscali.nl>写道：
如果你把它们标记为
< h1>< img src =" ..." ALT =" MainTitle8">< / H1>
好的，出于某种原因我甚至都没想过！谢谢。
对于FIR，我会做类似......
< div id =" content- text">
< span>< h1 class =" swap">我的主标题< / h1>< / span>
你可以'放一个< h1>在< span>内部
哎呀 - 错字。但我希望原理很清楚。
...和CSS一样......
h1.swap {<高度：22px;
背景重复：不重复;
}
h1.swap span {display：none;}
这意味着跨度在h1内部（它应该在外面，而不是像你的html所说的那样）
确实。
h1＃content-text {
background-image：url（" images / MainTitle8.gif"）;
}
你的CSS不适合你的HTML。上述选择器必须是div＃content-text h1。而不是h1＃content-text。
那将教我在没有上传的情况下敲出一个快速的帖子
示例代码到Web服务器并首先检查它！但是，希望，
它合理地说明了我试图讨论的内容。
这样，CSS启用了视觉效果浏览器会得到
标题的图像，其他任何东西都会得到普通的H1或H2。
你也必须设置一个高度为h1 ，因为我认为它会在没有内容的情况下崩溃。
的确，但这是在谈论我不再提议的内容>
呢，重点是没有实际意义:)
现在，我想，现在是'不 - 不，因为有些屏幕读者会解释CSS，因此不会看到隐藏的H标签。
显示：通常无法读取，所以确实是禁止的。
同意。
其他人怎么做？
就像我说的那样：
< h1>< img src =" image.jpg" alt ="替换图片中的标题">< / h1>
和我说的一样：谢谢:)
*（Fahrner图像替换 - 请参阅
http://www.stopdesign.com/articles/replace_text/ 提供了比我能给出的更好的解释。
在该页面上说：
"本文正文中描述的原始技术（FIR）不再推荐使用，因为它使隐藏文本完全无法用于某些屏幕读者。相反，请参阅文章末尾提到的
替代技术之一？重要说明？。
那，和其他类似的评论，是什么促使我修改我的
习惯...
我不喜欢那些'重要的三种替代方法
尽管注意到了''部分。更少的诡计，更好的imo。
我也不喜欢它们，出于同样的原因，这就是带来了什么？
我要问一下人们目前的解决方案。
只是出于兴趣，为什么（确实是）FIR优先于
放置图像和< hn>< / hn>内的alt文字对？技术
就像CS Zen Garden这样的地方。
-
Charlie
Charlie King写道：
只是出于兴趣，为什么（并且确实是）FIR优先选择
将图像和替代文字放在< ; HN>< / HN>对？
我不知道...
技术
就像CS Zen Garden这样的地方。
Zen Garden不是语义代码的好例子，它只是作为一个CSS能够设计明智的b $ b b展示。
-
Els http ：//locusmeus.com/
Sonhos vem。 Sonhos v？£。 O resto ??不好的。
- Renato Russo -
As I understand it, the use of FIR* to replace heading tags with
images in visually enabled CSS browsers is now frowned upon on the
basis that some screen readers will *nor* read back text that is
marked up by CSS to be invisible or hidden.
So...
If I want to replace headings with images (because my client wants to
use his specific font for headings where possible), what''s the best
way to do it?
Clearly, I can use img tags with the relevant alt tag, but that loses
me the importance structure that H tags would give me which, in turn,
loses hierarchical structural integrity and, more importantly,
accurate search-engine interpretation.
In more detail:
In the code snippet below, ''MainTitle8'' and ''SubTitle5'' are titles
that should have the importance of H1 and H2 respectively.
<div id="content-text">
<p><img src="images/MainTitle8.gif" /></p>
<p><img src="images/Recette1.jpg" /></p>
<p>Marc Wery, Professeur de Cuisine. <br />
Conseiller Culinaire. <br />
Finaliste du Grand Prix Escoffier 1995. <br />
3éme au Trophée Européen 1995.</p>
<img src="images/SubTitle5.gif" align="left" />
<p> </p>
<img src="images/Recette2.jpg" class="imgLeftFloat" />
...etc
With FIR, I would do something like...
<div id="content-text">
<span><h1 class="swap">My main heading</h1></span>
<p><img src="images/Recette1.jpg" /></p>
<p>Marc Wery, Professeur de Cuisine. <br />
Conseiller Culinaire. <br />
Finaliste du Grand Prix Escoffier 1995. <br />
3éme au Trophée Européen 1995.</p>
<span><h2 "class=swap">My sub heading</h2></span>
<p> </p>
<img src="images/Recette2.jpg" class="imgLeftFloat" />
...etc
....and CSS like ...
h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}
h2.swap {
height:18px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}
h1#content-text {
background-image:url("images/MainTitle8.gif");
}
h2#content-text {
background-image:url("images/SubTitle5.gif");
}
...etc
That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.
Now, I gather, that''s a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.
How is anyone else doing this?
*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)
Cheers
--
Charlie解决方案Charlie King wrote:
As I understand it, the use of FIR* to replace heading tags with
images in visually enabled CSS browsers is now frowned upon on the
basis that some screen readers will *nor* read back text that is
marked up by CSS to be invisible or hidden.
So...
If I want to replace headings with images (because my client wants to
use his specific font for headings where possible), what''s the best
way to do it?
Clearly, I can use img tags with the relevant alt tag, but that loses
me the importance structure that H tags would give me which, in turn,
loses hierarchical structural integrity and, more importantly,
accurate search-engine interpretation.
Not if you mark them up as
<h1><img src="..." alt="MainTitle8"></h1>
In more detail:
In the code snippet below, ''MainTitle8'' and ''SubTitle5'' are titles
that should have the importance of H1 and H2 respectively.
<div id="content-text">
<p><img src="images/MainTitle8.gif" /></p>
<p><img src="images/Recette1.jpg" /></p>
<p>Marc Wery, Professeur de Cuisine. <br />
Conseiller Culinaire. <br />
Finaliste du Grand Prix Escoffier 1995. <br />
3??me au Troph??e Europ??en 1995.</p>
<img src="images/SubTitle5.gif" align="left" />
<p> </p>
<img src="images/Recette2.jpg" class="imgLeftFloat" />
...etc
With FIR, I would do something like...
<div id="content-text">
<span><h1 class="swap">My main heading</h1></span>
You can''t put an <h1> inside a <span>
...and CSS like ...
h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}
That implies the span is inside the h1 (where it should be instead of
outside like your html says)
h1#content-text {
background-image:url("images/MainTitle8.gif");
}
Your CSS isn''t correct for your HTML. The above selector would have to
be "div#content-text h1" instead of "h1#content-text".
That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.
You would have had to set a height to the h1 as well, as I think it
would collapse without content.
Now, I gather, that''s a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.
Display:none is generally not read, so indeed, a no-no.
How is anyone else doing this?
Like I said:
<h1><img src="image.jpg" alt="replacement of title in image"></h1>
*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)
As they say on that page:
"The original technique (FIR) described in the body of this article is
no longer recommended for use, as it makes the hidden text completely
inaccessible for certain screen readers. Instead, see one of the
alternative techniques mentioned at the end of the article under
a??Important Notesa??."
I don''t like the three alternative methods from those ''important
notes'' section either though. The less trickery, the better imo.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -
On Sat, 14 Jan 2006 15:51:09 +0100, in
<1t******************************@40tude.net>
(comp.infosystems.www.authoring.stylesheets) Els
<el*********@tiscali.nl> wrote:
Not if you mark them up as
<h1><img src="..." alt="MainTitle8"></h1>
Ah OK, for some reason I''d not even considered that! Thanks.
With FIR, I would do something like...
<div id="content-text">
<span><h1 class="swap">My main heading</h1></span>
You can''t put an <h1> inside a <span>
Oops - typo. But I hope the principle was clear.
...and CSS like ...
h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}
That implies the span is inside the h1 (where it should be instead of
outside like your html says)
Indeed.
h1#content-text {
background-image:url("images/MainTitle8.gif");
}
Your CSS isn''t correct for your HTML. The above selector would have to
be "div#content-text h1" instead of "h1#content-text".
That''ll teach me to knock out a quick post without uploading my
example code to a webserver and checking it first! Hopefully, though,
it was reasonably illustrative of what I was attempting to discuss.
That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.
You would have had to set a height to the h1 as well, as I think it
would collapse without content.
Indeed, but as this is talking about what I''m no longer proposing to
do, the point is moot :)
Now, I gather, that''s a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.
Display:none is generally not read, so indeed, a no-no.
Agreed.
How is anyone else doing this?
Like I said:
<h1><img src="image.jpg" alt="replacement of title in image"></h1>
And, like I said: thanks :)
*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)
As they say on that page:
"The original technique (FIR) described in the body of this article is
no longer recommended for use, as it makes the hidden text completely
inaccessible for certain screen readers. Instead, see one of the
alternative techniques mentioned at the end of the article under
?Important Notes?."
That, and other similar comments, was what prompted me to revise my
habit...
I don''t like the three alternative methods from those ''important
notes'' section either though. The less trickery, the better imo.
I didn''t like them either, for the same reason, which was what brought
me to to ask about peoples'' current solutions.
Just out of interest, why was (and indeed is) FIR preferred over
putting an image and alt text inside an <hn></hn> pair? The technique
is all over places like CS Zen Garden, for example.
--
Charlie
Charlie King wrote:
Just out of interest, why was (and indeed is) FIR preferred over
putting an image and alt text inside an <hn></hn> pair?
I don''t know...
The technique
is all over places like CS Zen Garden, for example.
Zen Garden isn''t a good example of semantic code, it''s only meant as a
showcase of what CSS is capable of design wise.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -
这篇关于使用背景图像替换文本（FIR）等。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
