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

对于 Google，这第二种解决方案似乎您想隐藏 h1 标签中的内容:不好。

一个直观的例子会很有用，我不明白你想要实现的一切。