element()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
element() は CSS の関数で、任意の HTML 要素から生成された <image> 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。
特に便利な使い道としては、HTML の <canvas> 要素の画像を背景に使うというものです。
Gecko ブラウザーでは、標準外の document.mozSetImageElement() メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。
構文
element(id)
ここで:
- id
-
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
形式文法
<element()> =
element( <id-selector> )
<id-selector> =
<hash-token>
例
以下の例は、 -moz-element() に対応している Firefox のビルドが必要です。
いくらか現実的な例
この例では hidden 状態の <div> を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。
<div id="target-box">
<p>このボックスは、#my-background ID を付けている要素を背景として使用しています。</p>
</div>
<div id="background-container">
<div id="my-background">
<p>このテキストは背景の一部です。かっこいいでしょ？</p>
</div>
</div>
#target-box {
width: 400px;
height: 400px;
background: -moz-element(#my-background) no-repeat;
}
#background-container {
overflow: hidden;
height: 0;
}
#my-background {
width: 1024px;
height: 1024px;
background-image: linear-gradient(to right, red, orange, yellow, white);
}
#my-background p {
transform-origin: 0 0;
rotate: 45deg;
color: white;
}
"my-background" という ID を持つ <div> 要素が、「このボックスは、#my-background ID を付けている要素を背景として使用しています。」という段落を含むコンテンツの背景に使われています。
ページプレビュー
この Vincent De Oliveira の例に基づいた例は、 <div id="css-source"> のプレビューを <div id="css-result"> の中に生成します。
HTML
<div id="css-source">
<h1>ページプレビュー</h1>
</div>
<div id="css-result"></div>
CSS
#css-result {
background: -moz-element(#css-source) no-repeat;
width: 256px;
height: 32px;
background-size: 80%;
border: dashed;
}
結果
仕様書
| Specification |
|---|
| CSS Images Module Level 4 # element-notation |