H1 图像替换替代

Question

我希望在我的标题中添加一个 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影响或可用性问题吗？

Answer 1

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

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

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

Answer 2

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

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