0

我想使用 CSS 将以下 HTML 中的文本（ “Word 1 Word2 Word3 Word4” ）替换为图像。我希望图像也像文本一样水平显示。

<div id="aSentence">
    <p>
        <span id="word1">Word1&nbsp </span>
        <span id="word2">Word2&nbsp </span>
        <span id="word3">Word3&nbsp </span>
        <span id="word4">Word4&nbsp </span>
    </p>                    
</div>

我已经通读并尝试了mezzoblue和其他一些网站的一些技术，但我得出的结论是，这些技术似乎要求文本的跨度被一种或另一种元素类型包围，这将使单词不要水平排列。

关于如何实现这一目标的任何想法？我想（如果可能的话）使屏幕阅读器等可以“访问”该解决方案。

非常感谢，
普伦博。

PS：我尝试实现一些技术 - 它们都不能正常工作：TextReplacement.html

<!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.&nbsp;</span></li>
                        <li id="t1w2"><span>Word2.&nbsp; </span></li>
                        <li id="t1w3"><span>Word3.&nbsp; </span></li>
                        <li id="t1w4"><span>Word4.&nbsp; </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.&nbsp;</span></li>
                        <li id="t2w2"><span>Word2.&nbsp; </span></li>
                        <li id="t2w3"><span>Word3.&nbsp; </span></li>
                        <li id="t2w4"><span>Word4.&nbsp; </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.&nbsp;</span></li>
                        <li id="t3w2"><span>Word2.&nbsp; </span></li>
                        <li id="t3w3"><span>Word3.&nbsp; </span></li>
                        <li id="t3w4"><span>Word4.&nbsp; </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.&nbsp;</span></li>
                        <li id="t4w2"><span>Word2.&nbsp; </span></li>
                        <li id="t4w3"><span>Word3.&nbsp; </span></li>
                        <li id="t4w4"><span>Word4.&nbsp; </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.&nbsp;</span></li>
                        <li id="t5w2"><span>Word2.&nbsp; </span></li>
                        <li id="t5w3"><span>Word3.&nbsp; </span></li>
                        <li id="t5w4"><span>Word4.&nbsp; </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.&nbsp; </span>
                        <span id="t6w2">Word2.&nbsp; </span>
                        <span id="t6w3">Word3.&nbsp; </span>
                        <span id="t6w4">Word4.&nbsp; </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;
}
4

8 回答 8

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;}
于 2009-05-21T08:59:09.647 回答
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 友好，但它可以通过精美的图像看起来令人印象深刻。

于 2009-05-22T00:36:47.837 回答
2

嗨，我在一年前就这个问题准备了一个测试页cca，但我链接这个只是为了感兴趣，因为它会导致标签汤加上可能面临“图像关闭”问题。它的纯 CSS。

更新：它是为重复图像而设计的，所以这不是一种单一的图像替换技术。

于 2009-05-22T14:46:58.763 回答
1

你最初的想法是什么？你想达到什么目标？如果您想向访问者显示图像，只需IMG为此使用适当的标签并将文字附加到ALT属性上。

否则，如果这些图像真的不是内容图像而是表示层的一部分，那么恐怕你选择了错误的标记。SPANs 没有语义。你宁愿选择一个你可以随意设计的无序列表。

编辑

好的，根据您的回复，您确实希望在表示层中有一个解决方案。您可以为阴影效果选择标准 CSS2 属性text-shadow。它适用于 Safari、Opera 和 Konqueror，对于其余浏览器，您可以使用一些 JavaScript。

（SPAN是一个简单的容器元素，您可以在其上应用样式。）

于 2009-05-21T07:11:33.047 回答
1

没有语义含义：跨度对内容没有任何意义（就像 div 一样），因此它们可能是用于您想要做的事情的正确元素。

使跨度显示为一个块并浮动它：

span {
  display: block;
  float: left;
}
于 2009-05-21T08:55:29.357 回答
1

我使用的一种效果很好的技术是基本上将文本推出可显示区域。不确定它是否有名字，它总是需要剪裁，但本质上是：

height: {someHeight};
line-height: {someHeight x 3};
overflow: hidden;
letter-spacing: -1.1em; /* roughly */

第一行为元素留下一个高度，第二行将文本推到该高度之外（取决于字体大小，x3 只是一个很好的起点），第三行将其隐藏起来，最后一个核化了文本的宽度。

于 2009-05-21T09:00:11.423 回答
1

我个人更喜欢 Rundle 文本缩进技术，因为它简单优雅，没有额外的标记。如果您将显示更改为 inline-block它将为您工作。对于不支持 inline-block 的浏览器，请使用以下技术之一：http: //blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/（也请查看评论，那里有一些更简单的建议）。我同意@Jason 的观点，为此设计一个复杂的解决方案只是为了覆盖启用 css 和禁用图像的人可能是矫枉过正。

于 2010-11-20T16:59:55.703 回答
-2

使用 jQuery 将相关元素的文本替换为图像。图像是内联的，因此它们会顺其自然。

于 2009-05-21T08:58:06.437 回答