From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/image/index.html | 129 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/de/web/css/image/index.html (limited to 'files/de/web/css/image/index.html') diff --git a/files/de/web/css/image/index.html b/files/de/web/css/image/index.html new file mode 100644 index 0000000000..d84257fc23 --- /dev/null +++ b/files/de/web/css/image/index.html @@ -0,0 +1,129 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Bilder + - CSS Datentyp + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/image +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Der <image> CSS Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.

+ +

CSS kann verschiedene Arten von Bildern verarbeiten:

+ + + +

CSS bestimmt die konkrete Objektgröße anhand dieser inneren Maße, der angegebenen Größe definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der Standard Objektgröße, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjektartStandard Objektgröße
{{cssxref("background-image")}}Die Größe des Hintergrund Positionierungsbereichs des Elements
{{cssxref("list-style-image")}}Die Größe eines Zeichens in 1em
{{cssxref("border-image")}}Die Größe des Randbildbereichs des Elements
{{cssxref("cursor")}}Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht
Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}Ein 300px × 150px Rechteck
+ +

Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:

+ + + +

Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.

+ +
Hinweis: Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt Browser Kompatibilität enhält hierzu eine detaillierte Liste.
+ +

Syntax

+ +

Ein <image> CSS Datentyp kann die folgenden Bilder repräsentieren:

+ + + +

Beispiele

+ +

Dies sind gültige Bildwerte:

+ +
url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
+linear-gradient(to bottom, blue, red)  Ein <gradient>
+element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
+                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.
+
+ +

Dies sind ungültige Bildwerte:

+ +
cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
+url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
+element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Images', '#image-notation', 'image()')}}{{Spec2('CSS3 Images')}}Vor CSS3 gab es keinen explizit definierten <image> Datentyp. Bilder konnten nur durch die url() Funktion definiert werden.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.image")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf