mozilla
Ihre Suchergebnisse

    <image>

    Ü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:

    • Bilder mit inneren Maßen, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.
    • Bilder mit mehreren inneren Maßen, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht as innere Maß des flächenmäßig größten Bildes und mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.
    • Bilder ohne innerem Maß, die jedoch ein inneres Seitenverhältnis zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format..
    • Bilder ohne innere Maße noch innerem Seitenverhältnis, wie beispielsweise CSS Farbverläufen.

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

    Objektart Standard Objektgröße
    background-image Die Größe des Hintergrund Positionierungsbereichs des Elements
    list-style-image Die Größe eines Zeichens in 1em
    border-image Die Größe des Randbildbereichs des Elements
    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 content mit den CSS Pseudoelementen ::after und ::before Ein 300px × 150px Rechteck

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

    • Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.
    • Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.
    • Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.

    Bilder können von diversen CSS Eigenschaften verwendet werden, wie background-image, border-image, content, list-style-image oder 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:

    • Ein Bild, dass durch einen <uri> CSS Datentyp und die url() Funktion angegeben wird
    • Einen CSS <gradient>;
    • Einen Teil einer Seite, der durch die element() Funktion definiert wird.

    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.
    

    Spezifikation

    Spezifikation Status Kommentar
    CSS Image Values and Replaced Content Module Level 3
    Die Definition von 'image()' in dieser Spezifikation.
    Anwärter Empfehlung Vor CSS3 gab es keinen explizit definierten <image> Datentyp. Bilder konnten nur durch die  url() Funktion definiert werden.

    Browser Kompatibilität

    Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari
    <uri> (Ja) (Ja) (Ja) (Ja) (Ja)
    <gradient> (Ja)
    limited to background-image & background-moz
    (Ja)-webkit IE 10-ms (Ja)-o (Ja)-webkit
    element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?
    Merkmal Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    <uri> (Ja) (Ja) (Ja) (Ja) (Ja)
    <gradient> (Ja)
    limited to background-image & background-moz
    ? ? ? ?
    element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,