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/background-image/index.html | 155 +++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/de/web/css/background-image/index.html (limited to 'files/de/web/css/background-image') diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html new file mode 100644 index 0000000000..2c49b17489 --- /dev/null +++ b/files/de/web/css/background-image/index.html @@ -0,0 +1,155 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-image +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.

+ +

Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels background-color anzugeben. Die Kurzform background bietet sich an, um beides zu notieren.

+ +
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.
+Das zuerst definierte Hintergrundbild ist dabei das Oberste.
+ + + +

Syntax

+ +
background-image:  <Hintergrundbild>[, <Hintergrundbild>]*
+
+<Hintergrundbild>:
+none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()
+
+
+ +

Werte

+ +
+
none
+
Standardwert. Es wird kein Hintergrundbild verwendet.
+
url
+
Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Mozilla Erweiterungen:

+ +
+
-moz-linear-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Linearer Verlauf
+
-moz-radial-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Radialer Verlauf
+
+ +

Beispiele

+ +

Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. 

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Beispiele')}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere HintergrundbilderVerläufe
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)3.6 (1.9.2) [-moz-]
Opera3.510.5---
Safari (WebKit)1.0 (85)1.3 (312)4.0 (528) [-webkit-]
+ +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

-- cgit v1.2.3-54-g00ecf