Question

在CSS中进行图像替换的最佳（如跨浏览器）技术是什么？我使用sprites进行导航，但我希望标记保持SEO友好。给定以下HTML结构......

 <div id="menu">
   <ul>
     <li><a href="#">Test</a></li>
     <li><a href="#">Tester</a></li>
     <li><a href="#">Testing Testing</a></li>
   </ul>
 </div>

使用CSS仅用背景图片替换文本的最佳方法是什么？

我目前正在使用此...

text-indent: -9999px;

但是，它在启用CSS时失败，图像关闭。

Answer 1

如果这是html：

<div id="menu">
  <ul>
    <li><a href="#" id="home">Home</a></li>
    <li><a href="#" id="about">About</a></li>
    <li><a href="#" id="contact">Contact</a></li>
  </ul>
</div>

这就是css：

#menu ul li a{
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: transparent url(yourpicture.png) no-repeat 0 0;
  width: 100px;
}
#home{
  background-position: 0px 0px
}
#about{
  background-position: -100px 0px
}
#contact{
  background-position: -200px 0px
}

然后图像宽度为300px，每个标签宽度为100px。

Answer 2

2008年，Google在An Event Apart上的演示明确表示有效图像替换不会受到Google的惩罚。 See Mezzoblue's post about it

基本上，只要您替换文字的图片中包含相同文字，它就会被视为有效，而不是试图欺骗搜索引擎。他们如何确定图像是否有效？我不知道...... OCR？人工审核？

就CSS on / images off而言，没有完美的解决方案，所有这些都需要额外的非语义标记。请参阅发布在不同技术上的css-tricks链接。我个人并不打算使用CSS浏览但没有图像的用户很少。

您的选择很简单。额外标记，或者不关心css on / images off。

Answer 3

背景图片通常应用于<a>链接，为整个可点击区域提供图像。要隐藏文字，您可以使用text-indent的非常大的负值。

Answer 4

我刚刚提出这个，它似乎适用于所有现代浏览器，我只是测试它（IE8 /兼容性，Chrome，Safari，Moz）

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{
  background-image:url('images/my_image.png');
  width:100px;
  height:100px;}

Pro的：

图片替代文字是辅助功能/ seo的最佳做法
没有额外的HTML标记，而css也非常小
绕过css on / images off问题，其中“text-indent”技术仍为低带宽用户隐藏文字

我能想到的最大缺点是css off / images on situation，因为你只会发送一个透明的gif。

也许有可能写一些小的javascript来帮助解决这个问题，用它们的background-image css属性替换所有的图像源。但这只有在浏览器仍然将css属性附加到元素然后忽略它们时才有效。我不知道是否是这种情况，我将不得不测试它。您还需要开发基于javascript的测试，以查看是否将css应用于页面（可能会检查某些测试元素的位置）。

顺便说一句，我想知道，谁使用没有样式表的图像？某种手机还是什么东西？

编辑：

根据下面的评论...内联样式hrm ...也许我应该像<?php echo css_image('image_id','my text','image_url');?>一样创建一个php辅助函数来生成这样的代码：

HTML

<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->

然后只需在样式表中添加一些CSS

#image_id{width:*image width*;height:*image height*}

.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}

这是我正在使用的旧技术，不知道我在哪里发现它。它适用于CSS on / images off，CSS off / images on，CSS on / images on。

如果用户关闭/关闭图片，他们会看到加倍的文字。如果搜索引擎蜘蛛访问，他们会看到替代文本和常规文本，智能蜘蛛可以轻松识别它是什么，一种无辜的图像替换技术。

因此，这种技术对于屏幕阅读器来说是最糟糕的，因为读取了替代文字，但是这些用户应该能够跳到下一段，这就是为什么我将<p></p>放在“我的文本”周围。

关闭CSS和图像的所有其他人都是某种机器人，对吗？

Answer 5

#menu ul li a {
    display: block;
    background-image: url(images/someimage.png);
    text-indent: -9000px;
    width: 454px;
    height: 64px;
}

显示：块很重要，否则你的宽度和高度可能看起来不正确。

Answer 6

这是我使用代码替换徽标文字的代码，同时保留代码中的文字但未向用户显示（这是Google批准的）。在此处查看已完成的示例：

http://discretiondesigns.com/overflow/imagereplacement/

这是完整的代码（图片可以在上面的链接中找到 - 图像可以是不同的大小 - 整个图像可以点击并在悬停时更改）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement</title>
<style type="text/css">
<!--
#menu li { list-style: none; }

#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); }
#menu #a span { display: none; }

#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); }
#menu #b span { display: none; }

#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); }
#menu #c span { display: none; }
-->
</style>
</head>

<body>
 <div id="menu">
   <ul>
     <li id="a"><a href="#" title="This is A!"><span>Nav A</span></a></li>
     <li id="b"><a href="#" title="This is B!"><span>Nav B</span></a></li>
     <li id="c"><a href="#" title="This is C!"><span>Nav C</span></a></li>
   </ul>
 </div>
</body>
</html>

Answer 7

无论css / images的设置如何，这都被吹捧了：

http://www.tjkdesign.com/articles/tip.asp

Answer 8

CSS Tricks有关于主题here

的最详细的帖子之一

他们展示了各种技巧。解决你的css和图像关闭问题的那个是：

HTML：

CSS Tricks拥有主题here

上最详细的页面之一

他们展示了各种技巧。解决你的css和图像关闭问题的是＃8技术：

HTML：

<div id="menu">
    <ul>
        <li><a href="#"><span></span>Test</a></li>
        <li><a href="#"><span></span>Tester</a></li>
    </ul>
</div>

CSS：

#menu a {
    width: 350px; height: 75px; /*your values here*/ 
    position: relative;
}

#menu a span {
    background: url("images/li.jpg"); /*your image here*/
    position: absolute;
    width: 100%;
    height: 100%;
}

编辑：更新了所提供样本的代码。

PS：我没有测试上面的代码。

Answer 9

<强> CSS ：

#menu ul li a{
    display: block;
    background-image: url(http://example.com/sprite.png);
    width: 100px;
    height: 50px;
}

#a {
    background-position: <offset for sprite>;
}

#b {
    background-position: <offset for sprite>;
}

#c {
    background-position: <offset for sprite>;
}

<强> HTML ：

<div id="menu">
   <ul>
       <li id="a"><a href="#" title="Test">Test</a></li>
       <li id="b"><a href="#" title="Tester">Tester</a></li>
       <li id="c"><a href="#" title="Testing Testing">Testing Testing</a></li>
   </ul>
</div>

编辑：将链接文本添加回来......因为它被遗漏了。： - ）

最佳图像替换技术

9 个答案: