文字列(h1など)を画像で置き換える(overflow使用)

h1要素で指定したタイトルなどを画像に置き換える方法を照会します。

SEOを考えると画像よりも文字の方がよいと考えられるため次のような方法を取ってみます。 実際のところは、わかりませんが・・・。 span要素のような汎用要素を使わずに実現できる方法です。

HTMLの例 

<h1 id="logo">Hello world!</h1>

CSSの例 

*{
    margin:0;
    padding:0;
}
h1#logo {
    background-image: url('./img/logo.png');
    background-repeat: no-repeat;
    height: 0;
    overflow: hidden;
    padding-top: 80px;
    width: 200px;
}