[CSS]「background-clip」を使って、テキストの下に画像を表示するスタイルシート

CSS3の「background-clip」を使って、テキストの下に画像を表示するスタイルシートを紹介します。
また、CSSの特定のプロパティに対する、サポートブラウザと非サポートブラウザへの対応方法も解説されています。

Show Image Under Text (with Acceptable Fallback)
デモページ

[ad#ad-2]

デモはWebkit系ブラウザ（Chrome, Safari）でご覧ください。
マウスホバーでCSS3アニメーションも楽しめます。

マウスホバー時のキャプチャ

「background-clip」は背景の適用範囲を指定するプロパティで、対応していないFirefox 3.6で表示すると下記のようになります。
※Firefox 4では対応予定

非対応ブラウザでの表示

[ad#ad-2]

アイデアのベースとなったスタイルシートは、下記のようになります。

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

背景画像をエレメント（h1）に配置し、「background-clip」を使用します。また「text-fill-color」に「transparent」を指定するのがポイントです。

しかし、このままだとブラウザの互換性などに問題があるため、「Modernizr」を使用してブラウザが対応しているプロパティを調べ自動で処理させます。

JavaScript

<script src="modernizr-1.6.min.js"></script>
<script>
        Modernizr.addTest('backgroundclip',function(){

          var div = document.createElement('div');

          if ('backgroundClip' in div.style) return true;

          'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
            if (val+'BackgroundClip' in div.style) return true;
          });

        });
</script>

「background-clip」をサポートするブラウザにはbackgroundclipのclassをもたせます。
あとは、サポートするブラウザ用にスタイルシートを指定するだけです。

CSS

.backgroundclip h1 {
        background: url(images/west.jpg) -100px -40px no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

h1 {
        color: orangered;
}