<image>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Syntax
Der <image>
-Datentyp kann auf eine der folgenden Arten dargestellt werden:
- Ein Bild, das durch den
<url>
Datentyp bezeichnet wird - Ein
<gradient>
-Datentyp - Ein Teil der Webseite, definiert durch die
element()
Funktion - Ein Bild, Bildfragment oder einfarbiger Farbfleck, definiert durch die
image()
Funktion - Eine Mischung aus zwei oder mehr Bildern, definiert durch die
cross-fade()
Funktion - Eine Auswahl von Bildern, basierend auf der Auflösung, definiert durch die
image-set()
Funktion - Generiert durch ein paint worklet mit der
paint()
Funktion
Beschreibung
CSS kann folgende Arten von Bildern verarbeiten:
- Bilder mit intrinsischen Dimensionen (einer natürlichen Größe), wie ein JPEG, PNG oder ein anderes Rasterformat.
- Bilder mit mehrfachen intrinsischen Dimensionen, die in mehreren Versionen innerhalb einer einzigen Datei existieren, wie einige .ico-Formate. (In diesem Fall werden die intrinsischen Dimensionen die des Bildes sein, das die größte Fläche und das dem umgebenden Kasten am ähnlichsten ist in Bezug auf das Seitenverhältnis.)
- Bilder ohne intrinsische Dimensionen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie ein SVG oder ein anderes Vektorformat.
- Bilder ohne weder intrinsische Dimensionen noch ein intrinsisches Seitenverhältnis, wie ein CSS-Gradient.
CSS bestimmt die konkrete Größe eines Objekts unter Verwendung von (1) seinen intrinsischen Dimensionen; (2) seiner spezifizierten Größe, definiert durch CSS-Eigenschaften wie width
, height
, oder background-size
; und (3) seiner Standardgröße, die durch die Art der Eigenschaft bestimmt wird, mit der das Bild verwendet wird:
Art des Objekts (CSS-Eigenschaft) | Standardgröße des Objekts |
---|---|
background-image |
Die Größe des Hintergrundpositionierungsbereichs des Elements |
list-style-image |
Die Größe eines 1em -Zeichens |
border-image-source |
Die Größe des Randbildbereichs des Elements |
cursor |
Die vom Browser definierte Größe, die der üblichen Cursorgröße auf dem System des Clients entspricht |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
symbols() für @counter-style |
Funktion mit Risiken. Wenn unterstützt, die vom Browser definierte Größe, die der üblichen Cursorgröße auf dem System des Clients entspricht |
content für ein Pseudo-Element (::after /::before ) |
Ein 300px × 150px Rechteck |
Die konkrete Objektgröße wird unter Verwendung des folgenden Algorithmus berechnet:
- Wenn die spezifizierte Größe sowohl die Breite als auch die Höhe definiert, werden diese Werte als konkrete Objektgröße verwendet.
- Wenn die spezifizierte Größe nur die Breite oder nur die Höhe definiert, wird der fehlende Wert anhand des intrinsischen Verhältnisses bestimmt, falls vorhanden, der intrinsischen Dimensionen, wenn der spezifizierte Wert übereinstimmt, oder der Standardgröße des Objekts für diesen fehlenden Wert.
- Wenn die spezifizierte Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem intrinsischen Seitenverhältnis des Bildes entspricht, aber ohne die Standardgröße des Objekts in einer Dimension zu überschreiten. Wenn das Bild kein intrinsisches Seitenverhältnis hat, wird das intrinsische Seitenverhältnis des Objekts verwendet, auf das es angewendet wird; wenn dieses Objekt keines hat, werden die fehlenden Breite oder Höhe aus der Standardgröße des Objekts entnommen.
Hinweis: Nicht alle Browser unterstützen jede Art von Bild bei jeder Eigenschaft. Siehe den Abschnitt zur Browser-Kompatibilität für Details.
Barrierefreiheit
Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Bildschirmleser wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigt und somit für seine Nutzer nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.
Formale Syntax
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Gültige Bilder
url(test.jpg) /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red) /* A <gradient> */
element(#real-id) /* A part of the webpage, referenced with the element() function,
if "real-id" is an existing ID on the page */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
/* A section 16x16 section of <url>, starting from the top, left of the original
image as long as arrow.png is a supported image, otherwise a solid
red swatch. If language is rtl, the image will be horizontally flipped. */
cross-fade(20% url(twenty.png), url(eighty.png))
/* cross faded images, with twenty being 20% opaque
and eighty being 80% opaque. */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
/* a selection of images with varying resolutions */
Ungültige Bilder
no-url.jpg /* An image file must be defined using the url() function. */
url(report.pdf) /* A file pointed to by the url() function must be an image. */
element(#fakeid) /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0) /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolution */
Spezifikationen
Specification |
---|
CSS Images Module Level 3 # image-values |
Browser-Kompatibilität
BCD tables only load in the browser