Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

element()

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

element() は CSS の関数で、任意の HTML 要素から生成された <image> 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

特に便利な使い道としては、HTML の <canvas> 要素の画像を背景に使うというものです。

Gecko ブラウザーでは、標準外の document.mozSetImageElement() メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

ライブ画像実験的機能

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.background-image.element` 実験的			4
CSS タイプ
`element` 実験的 element() は CSS の関数で、任意の HTML 要素から生成された image 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。			57

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

/* Firefox only (with -moz- prefix) */
.preview {
  background: -moz-element(#source);
  background-size: contain;
}

CSS so-selement demo.

CSS pre- demo.

CSS tailrepeat demo.