最佳图像替换技术

发布于 2024-07-29 11:31:25 字数 586 浏览 6 评论 0原文

在 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 打开且图像关闭的情况下失败。

原文

What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure...

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

What is the best way to replace the text with a background image using CSS only?

I am currently using this...

text-indent: -9999px;

But, it fails with CSS on, and images off.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏天碎花小短裙 2024-08-05 11:31:26

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

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

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

The display:block is important or else your width and height may not look right.

回复收藏 0 原文

苏璃陌 2024-08-05 11:31:26

这是我用来用图像替换徽标文本的代码，同时将文本保留在代码中但不向用户显示（这是 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>

This is the code I use for replacing logo text with an image while keeping the text in the code but not shown to the user (this is Google approved). View the completed example here:

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

Here's the full code (images can be found at the above link - images can be varying sizes - the entire image is clickable and changes upon hover):

<!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>

回复收藏 0 原文

愿得七秒忆 2024-08-05 11:31:26

无论 css/images 的设置如何，这都可以工作：

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

回复收藏 0 原文

爱已欠费 2024-08-05 11:31:26

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：我没有测试上面的代码。

CSS Tricks has one of the most detailed posts on the subject here

They show various techniques. The one that solves your problem of css on and images off is:

HTML:

CSS Tricks has one of the most detailed pages on the subject here

They show various techniques. The one that solves your problem of css on and images off is the technique #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%;
}

EDIT: Updated the code to the sample provided.

PS: I didn't test the code above.

回复收藏 0 原文

把人绕傻吧 2024-08-05 11:31:26

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>

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

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>

Edit: added the link text back in... 'cause it was missed. :-)

回复收藏 0 原文

℉服软 2024-08-05 11:31:25

如果这是 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 像素宽。

If this is the 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>

And this is the 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
}

The image would then be 300px wide, and each tab would be 100px wide.

回复收藏 0 原文

离旧人 2024-08-05 11:31:25

2008 年，Google 在 An Event Apart 上的演示中明确表示，有效图像替换不会受到 Google 的处罚。查看 Mezzoblue 的帖子

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

至于 CSS 打开/图像关闭，没有完美的解决方案，它们都需要额外的非语义标记。请参阅 css-tricks 链接，该链接要求发布有关不同技术的内容。我个人并不关心使用 CSS 浏览但不使用图像的极少数用户。

您的选择很简单。额外的标记，或者不关心 css 打开/图像关闭。

回复收藏 0 原文

不必在意 2024-08-05 11:31:25

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

回复收藏 0 原文

小兔几 2024-08-05 11:31:25

我刚刚想出这个，它似乎适用于所有现代浏览器，我刚刚在（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 上测试了它：

图像替代文本是可访问性/搜索引擎优化的最佳实践，
无需额外HTML 标记，并且 css 也非常小，也
解决了 css on/images off 问题，其中“文本缩进”技术仍然为低带宽用户隐藏文本

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

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

顺便说一句，我想知道，谁使用没有样式表的图像？某种手机之类的？

编辑：

基于下面的评论...内联样式hrm...也许我应该制作一个像生成这样的代码：

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

then just Attach some CSS in the stylesheet

#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 打开/图像关闭、CSS 关闭/图像打开、CSS 打开/图像打开。

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

因此，这种技术对于屏幕阅读器来说最糟糕，因为会读取替代文本，但这些用户应该能够跳到下一段，这就是为什么我卡住了

围绕“我的文字”。

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

I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, 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's:

image alt text is best-practice for accessibility/seo
no extra HTML markup, and the css is pretty minimal too
gets around the css on/images off issue where "text-indent" techniques still hide text for low bandwidth users

The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.

It might be possible to write a little javascript to help out with this, replacing all the image sources with their background-image css properties. But this would only work if the browsers still attaches css properties to elements and then ignores them. I don't know if this is the case or not, I'll have to test it out. You'd also want to develop a javascript-based test to see if css is being applied to the page (maybe check the position of some test element).

btw, I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?

edit:

Based on comment below... inline styles hrm... maybe I should just make a php helper function like <?php echo css_image('image_id','my text','image_url');?> to generate some code like this:

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

then just attach some CSS in the stylesheet

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

it's an older technique that I'm using, not sure where I found it though. It works with CSS on/images off, CSS off/images on, CSS on/images on.

If a user with CSS off/images off visits, they'll see doubled up text. If a search engine spider visits, they'll see alt text and regular text, an intelligent spider could easily identify this for what it is, an innocent image replacement technique.

So, this technique is worst for screen readers, since alt text is read, but these users should be able to skip to the next paragraph, which is why I stuck <p></p> around "my text".

Everyone else with both CSS and images turned off is some kind of bot, right?

回复收藏 0 原文

~没有更多了~