0

我有一个非常简单的页面（也许太简单了）我只有一个标题和一个文本。我想应用新的 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>
4

1 回答 1

2

要将背景图像用作您的 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
}

演示

于 2013-06-10T16:02:40.487 回答