Kann ich mehrere Hintergrundbilder mit CSS haben?

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

Frage

Ist es möglich, zwei Hintergrundbilder zu haben? Zum Beispiel, würde Ich mag einen Bildwiederholtaste über die Spitze haben (repeat-x), und eine weitere Wiederholung über die gesamte Seite (Wiederholung), wobei den eine über die gesamte Seite hinter dem einen ist, die über die oben wiederholt.

Ich habe festgestellt, dass ich, indem den Hintergrund von HTML und Körper, um die gewünschte Wirkung für zwei Hintergrundbilder erreichen kann: 

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Ist der "gut" CSS? Gibt es eine bessere Methode? Und was, wenn ich wollte, drei oder mehr Hintergrundbilder?

War es hilfreich?

Lösung

CSS3 ermöglicht diese Art der Sache, und es sieht wie folgt aus: 

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Die aktuellen Versionen aller gängigen Browsern nun unterstützen , aber wenn Sie benötigen unterstützen IE8 oder unten, dann ist die beste Art und Weise kann man es umgeht, ist extra divs haben: 

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

Andere Tipps

Der einfachste Weg, den ich gefunden habe zwei verschiedene Hintergrundbilder in einem div verwenden, ist mit dieser Codezeile: 

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Natürlich, die nicht nur sein muss für den Körper der Website können Sie, dass für jedes div verwenden Sie wollen.

Ich hoffe, das hilft! Es gibt einen Beitrag auf meinem Blog, dass ein wenig mehr in der Tiefe darüber spricht, wenn jemand weitere Anweisungen oder Hilfe braucht - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .

verwenden diese 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

eine einfache Art und Weise Sie jede Bildposition mit Hintergrund-Position einstellen: und setzen wiederholen Eigenschaft mit background-repeat: für jedes Bild einzeln

Die aktuelle Version von FF und IE und einigen anderen Browsern unterstützt mehrere Hintergrundbilder in einer einzigen CSS2 Erklärung. Schauen Sie hier http://dense13.com/blog/ 2008/08/31 / multiple-Hintergrund-Bilder-mit-css2 / und hier http : //www.quirksmode.org/css/multiple_backgrounds.html und hier http://css3pie.com/

Ja, es ist möglich, und wird durch populären Usability-Tests Website Silver implementiert. Wenn Sie den Quellcode schauen durch können Sie sehen, dass der Hintergrund von mehreren Bildern aus, übereinander gelegt.

Hier ist der Artikel zeigt, wie die Wirkung zu tun, kann auf Vitamin . Ein ähnliches Konzept dieser ‚Zwiebelhaut‘ Schichten für die Verpackung kann auf A List Apart .

Wenn Sie mehrere Hintergrundbilder wollen, wollen aber nicht, sie zu überlappen, können Sie diese CSS verwenden: 

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

Mit dieser HTML-Struktur: 

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>


#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Wir können leicht mehrere Bilder mit CSS3 hinzufügen. Wir können hier im Detail lesen http://www.w3schools.com/css/css3_backgrounds.asp

Sie könnten ein div für die Spitze haben mit einem Hintergrund und einem anderen für die Hauptseite und trennen den Seiteninhalt zwischen ihnen oder dem Inhalt in einem schwebenden div auf einer anderen z-Ebene setzen. Die Art und Weise Sie es tun können funktionieren, aber ich bezweifle es wird über jeden Browser arbeiten Sie stoßen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top