我想使用CSS替换以下HTML中的文本（“Word 1 Word2 Word3 Word4”）。我希望这些图像也可以水平在线显示，就像文本一样。
<div id="aSentence">
<p>
<span id="word1">Word1  </span>
<span id="word2">Word2  </span>
<span id="word3">Word3  </span>
<span id="word4">Word4  </span>
</p>
</div>
我已经阅读并尝试了mezzoblue和其他一些网站的一些技术，但我得出的结论是，这些技术似乎要求文本的跨度被一个或另一个所包围元素类型，使单词不水平排列。
关于如何实现这一目标的任何想法？我希望（如果可能的话）让屏幕阅读器等“可以访问”解决方案。
非常感谢，
Prembo。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Text Replacement by Image using CSS</title>
<style type="text/css" title="currentStyle" media="screen">
@import "TextReplacement.css";
</style>
</head>
<body id="bodyId">
<div id="centerContainer">
<h1><span>Comparison of Various Techniques</span></h1>
<p class="noteText">(NOTE: only text "Word1" is being replaced by image)</p>
<div id="mainBodyContainer">
<div class="techniqueContainer">
<h2>Technique 1: FIR</h2>
<ul id="t1List">
<li id="t1w1"><span>Word1. </span></li>
<li id="t1w2"><span>Word2. </span></li>
<li id="t1w3"><span>Word3. </span></li>
<li id="t1w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 2: Radu</h2>
<ul id="t2List">
<li id="t2w1"><span>Word1. </span></li>
<li id="t2w2"><span>Word2. </span></li>
<li id="t2w3"><span>Word3. </span></li>
<li id="t2w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">All disapppear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 3: Rundle</h2>
<ul id="t3List">
<li id="t3w1"><span>Word1. </span></li>
<li id="t3w2"><span>Word2. </span></li>
<li id="t3w3"><span>Word3. </span></li>
<li id="t3w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">No effect - image and text visible.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 4: Leahy/Langridge</h2>
<ul id="t4List">
<li id="t4w1"><span>Word1. </span></li>
<li id="t4w2"><span>Word2. </span></li>
<li id="t4w3"><span>Word3. </span></li>
<li id="t4w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Image appears above Word1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 5: Dwyer</h2>
<ul id="t5List">
<li id="t5w1"><span>Word1. </span></li>
<li id="t5w2"><span>Word2. </span></li>
<li id="t5w3"><span>Word3. </span></li>
<li id="t5w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely. Same as Technique 1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 6: Jason</h2>
<div id="t6List" class="borderContainer">
<span id="t6w1">Word1. </span>
<span id="t6w2">Word2. </span>
<span id="t6w3">Word3. </span>
<span id="t6w4">Word4. </span>
</div>
<p class="techniqueComment">Same as Technique 3 - Rundle.</p>
</div>
</div>
</div>
</body>
</html>
CSS文件：TextReplacement.css
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}
#centerContainer {
margin-left: auto; /* centres container */
margin-right: auto; /* centres container */
margin-top: 18px;
}
#mainBodyContainer {
width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
font-size: 1.8em;
font-weight: bold;
}
#mainBodyContainer h2{
font-size: 1.2em;
font-weight: bold;
font-style: italic;
color: green;
}
div.techniqueContainer{
text-align: center;
margin-bottom: 30px;
}
p.techniqueComment{
font-size: 0.5em;
font-weight: normal;
font-style: italic;
color: red;
}
p.noteText{
font-size: 1em;
font-weight: normal;
font-style: italic;
color: blue;
}
#mainBodyContainer ul{
list-style: none;
border: 1px solid #820000;
}
#mainBodyContainer ul li{
display: inline;
}
/* TECHNIQUE 1: FIR */
li#t1w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t1w1 span {
display: none;
}
/* TECHNIQUE 2: Radu */
li#t2w1 {
width: 2250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png) top right;
margin: 0 0 0 -2000px;
}
/* TECHNIQUE 3: Rundle */
li#t3w1 {
width: 250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png);
text-indent: -9999px;
}
/*TECHNIQUE 4: Leahy/Langridge. */
li#t4w1 {
width: 250px;
padding: 61px 0 0 0;
height: 0;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat;
overflow: hidden;
}
/*TECHNIQUE 5: Dwyer. */
#t5{
}
#t5List{
list-style: none;
border: 1px solid #820000;
}
#t5List li{
display: inline;
}
li#t5w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t5w1 span{
display: block;
width: 0;
height: 0;
overflow: hidden;
}
/* TECHNIQUE 6: Jason */
li#t6w1 {
}
#t6w1{
text-indent: -5000px;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat 0 0;
overflow: hidden;
}
答案 0 :(得分：4)
很简单：
span {text-indent: -5000px; background: url(../images/yourimage.jpg) no-repeat 0 0; overflow: hidden;}
试一试。你会发现它有效。
无论你做什么，都不要使用JAVASCRIPT来达到这个效果。很容易在CSS中完成
您可能还想选择无序列表：
<ul>
<li>word</li>
...
</ul>
ul {list-style-type: none; margin: 0; padding: 0;}
li {list-style-type: none; float: left;}
答案 1 :(得分：4)
您的意思是保持HTML原样，但是显示图片而不是文字？如果是这样，可以这样做：
#word1 {
display:block;
width:100px; /* width of image */
height:80px; /* height of image */
background:url(image.jpg) top left no-repeat; /* sets image as background of span */
text-indent:-999999px; /* this hides the text so the image is not obstructed */
}
现在文字仍然存在且SEO友好，但它看起来令人印象深刻，花哨的图像。
答案 2 :(得分：2)
嗨我一年前就这个问题准备了一个test page cca，但我只是为了兴趣而将其链接起来，因为它导致标签汤加上可能面临“图像关闭”问题。纯CSS。
更新：它是为重复图像而设计的，因此这不是单片图像替换技术。
答案 3 :(得分：1)
你最初的想法是什么？你想达到什么目的？如果您想向访问者展示图片，只需使用正确的IMG标记，然后将这些字词附加到ALT属性。
否则，如果这些图像实际上不是内容图像而是表示层的一部分，那么我恐怕你选择了错误的标记。 SPAN没有语义含义。你宁愿选择一个你可以设计的无序列表。
修改
好的，根据你的回答，你真的想要一个表示层的解决方案。您可以为阴影效果选择标准CSS2属性text-shadow。它适用于Safari，Opera和Konqueror，对于其余浏览器，您可以使用some JavaScript。
（SPAN是一个简单的容器元素，可以应用样式。）
答案 4 :(得分：1)
没有语义含义：Spans对内容没有任何意义（就像div一样），所以它们可能是你想要做的事情的正确元素。
将跨度显示为块并浮动它：
span {
display: block;
float: left;
}
答案 5 :(得分：1)
我使用的一种技术效果很好，就是将文本推出可显示区域。不确定它是否有名称，它总是需要剪裁但基本上是：
height: {someHeight};
line-height: {someHeight x 3};
overflow: hidden;
letter-spacing: -1.1em; /* roughly */
第一行留下元素的高度，第二行将文本推到该高度以外（字体大小取决于，x3只是一个很好的起点），第三行将其隐藏在显示位置，最后一个取消显示的宽度文本。
答案 6 :(得分：1)
我个人更喜欢Rundle文本缩进技术，因为它简单而优雅，没有额外的标记。如果您将显示更改为内嵌块，它将适合您。对于不支持inline-block的浏览器，请使用以下技术之一：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/（检查注释，还有一些更简单的建议）。 我同意@Jason为此制定一个复杂的解决方案只是为了覆盖那些启用了css且禁用图像的人可能有点过分。
答案 7 :(得分：-2)
使用jQuery将相关元素的文本替换为图像。图像是内联的，因此它们将随流程一起使用。