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>

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

1 个答案: