Css H1图像替换方案

我希望在我的标题中添加一个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内容将是“kb-k bwf kb”，屏幕阅读器不会理解以下图像的

alt

属性实际上是您的h1

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

---

一个直观的例子会很有用，我不明白你想要达到的目的。

谷歌从来没有任何关于在

标签中隐藏文本和使用图像的正面说法，所以我总是犹豫是否推荐这一解决方案。您的最后一项技术几乎肯定属于向搜索引擎提供不同内容的范畴，因此我也建议您不要使用它

不过，你的第二个想法是正确的。您要做的是确定布局的宽度并相应地调整图像。事实上我强烈建议你学习如何去做

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

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

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