element()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die element() CSS Funktion definiert einen <image>-Wert, der aus einem beliebigen HTML-Element generiert wird. Dieses Bild ist dynamisch, was bedeutet, dass, wenn das HTML-Element geändert wird, die CSS-Eigenschaften, die den resultierenden Wert verwenden, automatisch aktualisiert werden.

Ein besonders nützliches Szenario für die Verwendung wäre, ein Bild in einem HTML-<canvas>-Element zu rendern und dieses dann als Hintergrund zu verwenden.

In Gecko-Browsern können Sie die nicht standardisierte Methode document.mozSetImageElement() verwenden, um das Element zu ändern, das als Hintergrund für ein gegebenes CSS-Hintergrundelement verwendet wird.

Syntax

css
element(id)

wobei:

id

Die ID eines Elements, das als Hintergrund verwendet wird, angegeben durch das HTML-Attribut #id auf dem Element.

Formale Syntax

<element()> = 
element( <id-selector> )

<id-selector> =
<hash-token>

Beispiele

Diese Beispiele funktionieren in Firefox-Builds, die -moz-element() unterstützen.

Ein etwas realistisches Beispiel

Dieses Beispiel verwendet ein verborgenes <div> als Hintergrund. Das Hintergrundelement verwendet einen Verlauf, enthält aber auch Text, der als Teil des Hintergrunds gerendert wird.

html
<div
  style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
    id="myBackground1"
    style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>

Das <div>-Element mit der ID "myBackground1" wird als Hintergrund für den Inhalt, einschließlich des Absatzes "This box uses the element with the #myBackground1 ID as its background!", verwendet.

Seitenvorschau

Dieses Beispiel basierend auf Vincent De Oliveiras erstellt eine Vorschau des <div id="css-source"> innerhalb des <div id="css-result">.

HTML

html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>

CSS

css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 4
# element-notation

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
element()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch