Multiple Background Clip

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Sie wissen, wie Sie mehrere Hintergründe haben können?

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

Das ist nur background-image. Sie können auch deren Position festlegen, wie Sie es erwarten würden. Wir werden es abkürzen

body {
  background: 
    url(image-one.jpg) no-repeat top right,
    url(image-two.jpg) no-repeat bottom left;
}

Ich habe background-repeat nur zum Spaß dazwischengeschoben. Eine weitere Eigenschaft, an die man bei mehreren unterschiedlichen Hintergründen vielleicht nicht denkt, ist background-clip. In diesem verlinkten Artikel merkt Stefan Judis an, dass dies einige ziemlich legitime CSS-Tricks ermöglicht!

Direkter Link →