0

我希望在我的标题中添加一个 h1 元素，但是我在标题中使用标签（不是背景图像），当屏幕分辨率发生变化时它们会相互替换。

我看过技术

<h1 class="technique-four">
<a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>


h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}

...但是由于我的布局是流畅的，因此可以在图像更改时看到背景。

甚至有必要用图像替换 h1 吗？我不能做类似的事情：

<h1 class="headerhone">kb-k bwf-kb</h1> 

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/></a>

（忽略php）

然后给 h1 一个零高度：

h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

} /*this was suggested to me as an alternative to the -9999px; thing.*/

这行得通吗？它会有任何负面的 SEO 影响或可用性问题吗？

4

2 回答 2

0

谷歌从来没有对隐藏文本和在<h1>标签中使用图像有任何积极的评价，所以我总是犹豫是否推荐它作为解决方案。您的最后一项技术几乎肯定会属于向搜索引擎提供不同内容的范畴，因此我也建议您反对。

你的第二个想法是在正确的轨道上。您要做的是使用响应式设计来确定布局的宽度并相应地调整图像。事实上，谷歌最近在他们的博客上写了很多关于它的文章。我强烈建议学习如何做到这一点。

于 2012-06-08T11:47:51.447 回答
0

在第二个解决方案中，在屏幕阅读器上，您的 h1 内容将是“kb-k bwf-kb”，屏幕阅读器不会理解alt以下图像的属性实际上是您的 h1。

对于谷歌来说，第二个解决方案似乎你想在 h1 标签中隐藏内容：不好。

一个视觉示例会很有用，我不明白你想要实现的所有目标。

于 2012-06-08T09:32:08.050 回答