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 -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--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(  )  

 =

Beispiele

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

Ein etwas realistisches Beispiel

Dieses Beispiel verwendet ein verborgenes

als Hintergrund. Das Hintergrundelement verwendet einen Verlauf, enthält aber auch Text, der als Teil des Hintergrunds gerendert wird.

html


  This box uses the element with the #myBackground1 ID as its background!



  
    
      This text is part of the background. Cool, huh?

Das

-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

innerhalb des

HTML

html


  Page Preview

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