mozilla
Ihre Suchergebnisse

    mehrere Hintergründe in CSS verwenden

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    Mit CSS3, können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

    mehrere Hintergründe festzulegen ist einfach:

    .myclass {
      background: background1, background 2, ..., backgroundN;
    }
    

    Du kannst dies mit beiden Varianten, der verkürzten background Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser background-color. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

    Beispiel

    In diesem Beispiel werden drei Hintergründe aufeinandergestapelt: das Firefox Logo, ein linear gradient, und ein Bild mit Blumen:

    .multi_bg_example {
      background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
            linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
            url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
      background-repeat: no-repeat, no-repeat, repeat;
      background-position: bottom right, left, right;
    }
    
    Resultat
    css_multibg.png

    Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Gradient, welcher wiederum auf dem geblümten Hintergrund liegt. Jede nachfolge Untereigenschaft (background-repeat und background-position) gilt für den entsprechenden Hintergrund. Demzufolge wird der erste aufgelistete Wert für background-repeat den ersten (vordersten) Hintergrund gelten und so weiter.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

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