Ihre Suchergebnisse

    background-clip

    Übersicht

    Die background-clip Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des Elementrahmens erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.
    Die Eigenschaft -moz-background-clip wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

    Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.

    Wenn kein background-image vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe border-style). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.

    • Standardwert: border-box
    • Anwendbar auf: alle Elemente
    • Vererbbar: Nein
    • Prozentwerte: Nein
    • Medium: visuell
    • berechneter Wert: wie festgelegt

    Syntax

    background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
    
    -moz-background-clip:  [border | padding][, [border | padding]]*  /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
    

    Werte

    border-box bzw. border (Firefox 1.0-3.6)
    Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).
    padding-box bzw. padding (Firefox 1.0-3.6)
    Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).
    content-box
    Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.

    Beispiele

    pre {
       border: 1em navy;
       border-style: dotted double;
       background: tomato;
       /* Der rote Hintergrund wird nicht unter den Rahmen wandern */
       -moz-background-clip: padding;         /* Firefox 1.0-3.6 */
       -webkit-background-clip: padding-box;  /* Safari, Chrome */
               background-clip: padding-box;  /* Firefox 4.0+, Opera */
    }
    

    Browser Kompatibilität

    Browser ab Version Unterstützung von
    Chrome 1.0 background-clip:  padding-box | border-box | content-box
    Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-clip: padding | border
    4.0 (2.0) background-clip:  padding-box | border-box | content-box
    Internet Explorer 9.0 background-clip:  padding-box | border-box | content-box
    Opera 10.5 background-clip:  padding-box | border-box
    Safari (WebKit) 3.0 (522) -webkit-background-clip:  padding | border | content
    -webkit-background-clip:  padding-box | border-box | content-box
    • [*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie background-clip:padding wenn overflow: hidden | auto | scroll festgelegt wurde.
    • Konqueror 3.5.4 unterstützt -khtml-background-clip.

    Spezifikation

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: fscholz
    Zuletzt aktualisiert von: fscholz,
    Seitenleiste ausblenden