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 に答える