CSS/Tutorials/Hintergrund/background

← CSS Sprites

Gestaltung von Hintergründen
(Übersicht)

Verläufe
mit linear-gradient() →

ToDo (weitere ToDos)

Integration dieses Artikels in die vorderen Kapitel, da er eine Dopplung zu den bestehenden Kapiteln darstellt.

• Einzeleigenschaften in Referenz unter CSS/Eigenschaften integrieren.

--Matthias Scharwies (Diskussion) 06:12, 29. Jun. 2021 (CEST)

background-clip

Mit der Eigenschaft background-clip können Sie bestimmen, dass die Hintergrundeigenschaften nur für bestimmte Bereiche der Elementbox gelten.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Erlaubt sind dabei die folgenden Angaben:

• border-box, (Standardwert) Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt,
• content-box, Hintergrund wird nur im Inhaltsbereich dargestellt
• padding-box, Hintergrund wird im Inhalts- und padding-Bereich dargestellt

Für ein tieferes Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Anwendungsbeispiel ansehen …

div {
        width: 20em;
        margin: 1em;
        outline: 1px solid black; 
        border: 1em dashed red; 
        padding: 1em;
        background-color: gold;
}
#one   { background-clip: border-box; }
#two   { background-clip: padding-box; }
#three { background-clip: content-box; }

ansehen …

In diesem Beispiel erhalten die Div-Elemente alle eine dünne schwarze Außenlinie, einen breiten gestrichelten Rahmen sowie einen goldfarbenen Hintergrund, um die verschiedenen Werte für background-clip veranschaulichen zu können.

← CSS Sprites

Gestaltung von Hintergründen
(Übersicht)

Verläufe
mit linear-gradient() →