background-image

• background-image: url("background-image.png")
• background-size: 300px 300px; | px; %; contain; cover; auto
• background-position: center center | 40px 40px; center -10%
• background-repeat: round; | repeat-x; repeat-y; no-repeat; space
• background-attachment: fixed | scroll (default); fixiert das Hintergrundbild an einer festen Position im Browserfenster
• background-image: linear-gradient(90deg, #FED2CF,#fff,#B5D5D8);
• background-image: radial-gradient(circle at center,#FED2CF,#B5D5D8);
• background-image: conic-gradient(red,yellow,gree,blue);
• background-color: #fff | setzt die Farbe des Hintergrunds
• Bestimmt ein Bild oder einen Verlauf als Hintergrundbild für ein Element.
• background: #efefef url("image.png") repeat-x; | background ist die Kurzschrift
• Mit @keyframes sind Animationen möglich.
• mediaevent/css/background-image

mask-image

• mask-image : url(mask.webp);
  CSS mask-image stellt Fotos und Texte anhand von WebP- oder PNG-Bildern sowie von SVG-Pfaden oder Verläufen (gradient) frei.
  Funktioniert am besten mit webp Bildformat da dieses den weichen Übergang unterstützt, was der Vorteil gegenüber clip-path ist.
  mask-image lässt sich animieren, die Maske muss kein Bild, sondern kann auch ein Verlauf (CSS Gradient) oder sogar ein Text sein.
• selfhtml/css/masken
• mediaevent/css/mask-image

background-clip

• background-origin und background-clip bestimmen die Reichweite und die Position von Hintergrundbildern.
  background-clip beschneidet das Hintergrundbild
• background-clip: border-box; | lässt den Hintergrund bis unter border laufen
  background-clip: padding-box; | beschneidet den Hintergrund auf den Bereich ohne border
  background-clip: content-box; | beschneidet den Hintergrund auf den Bereich ohne border und ohne padding.
• mediaevent/css/background-origin-clip

background-origin

• background-origin und background-clip bestimmen die Reichweite und die Position von Hintergrundbildern.
  background-origin legt den Ursprung des Hintergrunds fest
• background-origin: border-box; | zieht das Hintergrundbild unter die Border
  background-origin: padding-box; | Hintergrundbild wird verkleinert, nicht geschnitten
  background-origin: content-box; | Hintergrundbild wird verkleinert, nicht geschnitten
• mediaevent/css/background-origin-clip

backdrop-filter

• Wird verwendet, um einen grafischen Effekt auf den Bereich hinter einem Element anzuwenden.
  Um den Effekt zu sehen, muss der Hintergrund zumindest teilweise transparent sein.
  Man kann jeden bekannten Filter anwenden.
• w3schools/css/backdrop-filter

clip-path

• clip-path: inset(15% 10% 20% 10%);
  clip-path: circle(30% at center);
  
• Ein clip-path legt eine Form über ein Element: Alles außerhalb der Form wird unsichtbar und der Hintergrund des umfassenden Blocks ist darunter sichtbar.
• clip-path beschneidet Elemente mit einfachen Polygonen, Kreisen, Ellipsen und Rechtecken oder stellt komplexe Formen mit einem SVG-Pfad frei.
• mit @keyframes sind Animationen möglich
• bennettfeely/clip-path generator
• mediaevent/css/clip-path

filter

• .element {
    filter: blur(5px); | Weichzeichnen
    filter: opacity(0.75); | Deckkraft 0-1
    filter: drop-shadow(10px 10px 10px black); | Schlagschatten für Formen
    filter: invert(1); | Farben invertieren
  }
• selfhtml/filter

object-fit

• object-fit bestimmt, wie Bilder und Videos verkleinert oder vergrößert werden, um in das Layout zu passen
• Bei Hintergrundbildern mit background-image wirken background-size: cover / contain.
  object-fit ist das Äquivalent für Bilder im img-Tag.
• object-fit: cover; | cover deckt die volle Höhe des Blocks ab und die Seiten des Bilds sind rechts und links abgeschnitten.
• object-position: 0% - 100% | object-position versetzt den angezeigten Bildausschnitt.
  0% - wird der linke Bildausschnitt gezeigt,
  50% - der mittlere und
  100% - der rechte Rand des Bildes
  object-position ist animierbar
• object-fit: contain; | rendert Bilder responsive damit sie ohne Beschneidung in den Block passen. Auf diese Weise bleiben Ränder stehen wenn der Block Höher oder Breiter als das Bild ist.
• mediaevent/css/object-fit