7

在 CSS 中进行图像替换的最佳(如跨浏览器)技术是什么?我正在使用精灵进行导航,但我希望标记保持对 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 打开和图像关闭时失败。

4

9 回答 9

2

2008 年,谷歌在 An Event Apart 上的演讲明确表示,有效的图片替换不会受到谷歌的惩罚。请参阅 Mezzoblue 的帖子

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

至于 CSS on/images off,没有完美的解决方案,它们都需要额外的非语义标记。请参阅 beggs 在不同技术上发布的 css-tricks 链接。我个人并不介意使用 CSS 浏览但没有图像的极少数用户。

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

于 2009-08-06T03:06:04.737 回答
2

如果这是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
}

然后图像将是 300 像素宽,每个选项卡将是 100 像素宽。

于 2009-08-04T03:56:46.860 回答
1

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

于 2009-08-04T03:57:08.060 回答
1

我刚想出这个,它似乎适用于所有现代浏览器,我只是在(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;}

专业人士:

  • 图像替代文本是可访问性/seo 的最佳实践
  • 没有额外的 HTML 标记,而且 css 也非常小
  • 解决 css on/images off 问题,其中“文本缩进”技术仍然为低带宽用户隐藏文本

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

可能可以编写一些 javascript 来帮助解决这个问题,用它们的背景图像 css 属性替换所有图像源。但这只有在浏览器仍然将 css 属性附加到元素然后忽略它们时才有效。我不知道是不是这样,我得测试一下。您还想开发一个基于 javascript 的测试来查看是否将 css 应用于页面(可能检查某些测试元素的位置)。

顺便说一句,我想知道,谁使用没有样式表的图像?某种手机什么的?

编辑:

根据下面的评论...内联样式 hrm...也许我应该只制作一个 php 辅助函数,例如<?php echo css_image('image_id','my text','image_url');?>生成一些这样的代码:

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。

如果关闭 CSS/图像的用户访问,他们会看到双倍的文本。如果搜索引擎蜘蛛访问,他们会看到替代文本和常规文本,智能蜘蛛可以很容易地识别出它是什么,这是一种无辜的图像替换技术。

因此,这种技术对于屏幕阅读器来说是最糟糕的,因为会读取 alt 文本,但这些用户应该能够跳到下一段,这就是我坚持<p></p>“我的文本”的原因。

其他所有关闭 CSS 和图像的人都是某种机器人,对吧?

于 2010-04-14T13:11:01.590 回答
0

CSS Tricks 在这里有关于该主题的最详细的帖子之一

他们展示了各种技术。解决您的 css 开启和图像关闭问题的方法是:

HTML:

CSS Tricks 在这里有关于该主题的最详细的页面之一

他们展示了各种技术。解决 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:我没有测试上面的代码。

于 2012-09-23T02:02:19.410 回答
0

这是我用来用图像替换徽标文本的代码,同时将文本保留在代码中但不向用户显示(这是 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>
于 2009-08-05T17:02:15.147 回答
0
#menu ul li a {
    display: block;
    background-image: url(images/someimage.png);
    text-indent: -9000px;
    width: 454px;
    height: 64px;
}

display:block 很重要,否则您的宽度和高度可能看起来不正确。

于 2009-08-04T03:58:23.533 回答
0

无论 css/images 的设置如何,这都被吹捧为有效:

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

于 2010-11-03T20:00:29.657 回答
-1

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>

编辑:将链接文本添加回......因为它被错过了。:-)

于 2009-08-04T04:06:15.453 回答