jquery - CSS 图像替换的最佳现代方法

Question

我已经尝试了几乎所有的方法来隐藏页面标题(h1 标签)的文本内容并显示图像。下面是我最接近的，但它有一个烦人的缺陷...... h1 的高度保持不变，不会缩小到背景图像的高度降低。还有其他方法可以解决这个问题吗？

<style>
    max-width:660px; 
    min-height:150px; 
    background: url('/images/theTitleBkgrdImage.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
</style>

<h1 class="pgTitle">This is the page title</h1>

Answer 1

如果您在图像中使用 alt 属性，机器人和屏幕阅读器将理解文本属于 h1。

<h1><img alt="This is the page title" src="/images/theTitleBkgrdImage.jpg" /></h1>