如何使用CSS替换内嵌文本与图像

时间:2009-05-21 06:59:46

标签: html css image image-replacement

我想使用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和其他一些网站的一些技术,但我得出的结论是,这些技术似乎要求文本的跨度被一个或另一个所包围元素类型,使单词不水平排列。

关于如何实现这一目标的任何想法?我希望(如果可能的话)让屏幕阅读器等“可以访问”解决方案。

非常感谢,
Prembo。

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;
}

8 个答案:

答案 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)

没有语义含义:Spans对内容没有任何意义(就像div一样),所以它们可能是你想要做的事情的正确元素。

将跨度显示为块并浮动它:

span {
  display: block;
  float: left;
}

答案 4 :(得分:1)

你最初的想法是什么?你想达到什么目的?如果您想向访问者展示图片,只需使用正确的IMG标记,然后将这些字词附加到ALT属性。

否则,如果这些图像实际上不是内容图像而是表示层的一部分,那么我恐怕你选择了错误的标记。 SPAN没有语义含义。你宁愿选择一个你可以设计的无序列表。

修改

好的,根据你的回答,你真的想要一个表示层的解决方案。您可以为阴影效果选择标准CSS2属性text-shadow。它适用于Safari,Opera和Konqueror,对于其余浏览器,您可以使用some JavaScript

SPAN是一个简单的容器元素,可以应用样式。)

答案 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将相关元素的文本替换为图像。图像是内联的,因此它们将随流程一起使用。