-moz-elementを使用して要素を背景画像として使用する

David Walshによる「-moz-elementで要素を背景画像として使用」の翻訳



すべてのブラウザベンダーが独自の方法で多くのCSSおよびJavaScript機能を定義していることは誰もが知っています。そのために感謝しています。 MozillaとWebKitは興味深い独自の機能を提供しますが、私たちが知っているように、標準は長年にわたって承認されてきましたが、必要以上に長い間、私たちは皆感謝しています。 まだ聞いたことがない面白いCSSプロパティが1つあります。これは、開発者がHTML要素を他の要素の背景として使用できるようにするMozill実装のCSSプロパティです。

デモを見る

HTMLとCSS

HTML要素が現在のページ内に存在し、スタイルセットがあるとします。 要素には、CSSグラデーション、テキスト、およびいくつかのCSSプロパティがあります。

 <div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);"> I'm in the background. </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素属性内にスタイルを設定しますが、-moz-elementは、スタイルタグまたは外部スタイルシートで指定されたスタイルでも機能します。 ページに要素が追加されたので、それを別の要素の「背景」として使用できます。

 #mySpecialElement { /* mozElementBack exists as an element within the page */ background: -moz-element(#mozElementBack) repeat; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

理論上、要素IDを-moz-element



プロパティに割り当てると、要素が背景画像に変わり、background-repeatなどすべてを適用できるようになります。 また、背景要素のスタイルとコンテンツが更新されると要素が更新されるため、「ライブ」背景で作業していることに注意してください。

デモを見る

素晴らしいCSSプロパティですよね？ 既存のHTML要素をCSSの背景として使用できるというのは驚くべきことですが、Mozillaのおかげで完全に可能です。 これらのプロパティの実際の適用について考えますか？ -moz-element



見られる利点は、テキストをバックグラウンドに含めることができ、外部スクリプト（ソーシャルブックマークスクリプトなど）によって生成された要素も使用できることです。 これはなんと面白い実装でしょう！