Question

我有一个非常简单的页面（也许太简单了）我只有一个标题和一个文本。我想应用新的html5语义元素。第一个问题是标题。出于设计原因，我希望它是一个img，我使用img背景。所以我不使用h1。这不会创建正确的页面轮廓。如何使用正确的语义html5执行此页面？

您可以使用：http://jsfiddle.net/Narcis/ktF96/

CSS：

#title{
    position:relative;
    margin:0 auto;
    background-image:url('img.png');
}

HTML：

<div id="title"></div>

<div id="text">
  <p>text, text,</p>
</div>

Answer 1

要将背景图像用作H1，请使用text-indent向有视力的用户（但不是屏幕阅读器用户或搜索引擎）隐藏H1文本，并指定背景图像的路径及其高度。

例如，您的HTML将是这样的：

<h1>Art of the Title</h1>

CSS：

h1 {
    text-indent: -999em; // that's the most you can left indent something
    background: url('/PATH/TO/YOUR/IMG.png'); // your background image
    height: 300px; // the height of your background image
}

Demo

当h1是img背景时的html5结构

1 个答案: