Kann ich mehrere Hintergrundbilder mit CSS verwenden?

299

Ist es möglich, zwei Hintergrundbilder zu haben? Zum Beispiel möchte ich, dass ein Bild oben wiederholt wird (Wiederholung-x), und eine weitere Wiederholung über die gesamte Seite (Wiederholung), wobei das Bild auf der gesamten Seite hinter dem Bild liegt, das sich oben wiederholt.Kann ich mehrere Hintergrundbilder mit CSS verwenden?

ich gefunden habe, 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 wenn ich drei oder mehr Hintergrundbilder haben wollte?

Quelle

2009-01-08 Rudd Zwolinski

368

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; 
}

The current versions of all the major browsers now support it, aber wenn Sie IE8 oder unten unterstützen müssen, dann ist die beste Art und Weise Sie es umgehen können, ist zusätzliche divs zu 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; 
}

Quelle

2009-01-08 03:45:22 nickf

+27

Mehrere Hintergründe werden von den neuesten Versionen von Firefox, Chrome, Safari und Opera unterstützt. Es wird auch in IE9 unterstützt werden. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets) –

Und wenn Sie verschiedene Wiederholung/Position Einstellungen haben möchten, können Sie dies tun: http://www.css3.info/preview/multiple-backgrounds/ – Krisc

Für IE8 - IE6 können Sie PIE.js verwenden. http://webdesign.utsplus.com/tutorials/htmlcss-tutorials/curing-css3-headaches-in-older-browsers/ –

Sie könnten ein div für den Anfang mit einem Hintergrund und einen anderen für die Hauptseite haben und den Seiteninhalt zwischen ihnen trennen oder den Inhalt in ein Floating-Div auf einer anderen Z-Ebene legen. Die Art, wie Sie es tun, funktioniert möglicherweise, aber ich bezweifle, dass es in jedem Browser funktioniert, den Sie begegnen.

Quelle

2009-01-08 03:44:13

Ja, es ist möglich, und wird durch populäre Usability-Tests Website Silverback implementiert. Wenn Sie durch den Quellcode schauen, können Sie sehen, dass der Hintergrund aus mehreren Bildern besteht, die übereinander liegen.

Hier ist der Artikel, der zeigt, wie man den Effekt auf Vitamin finden kann. Ein ähnliches Konzept zum Umhüllen dieser "Zwiebelschalen" -Schichten findet sich unter A List Apart.

Quelle

2009-01-08 03:51:09

Aktuelle Version von FF und IE und einige andere Browser unterstützen mehrere Hintergrundbilder in einer einzigen CSS2-Deklaration. Hier http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ und hier http://www.quirksmode.org/css/multiple_backgrounds.html und hier http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Für IE, könnten Sie in Betracht ziehen, ein Verhalten hinzuzufügen. Schau mal hier: http://css3pie.com/

Quelle

2010-10-30 23:00:16 Shannon

Eigentlich gibt es eine article, die Ihnen sagen, wie es mit einem IE Filter in der CSS Datei zu tun.

Ich hoffe, es ist nützlich.

Quelle

2010-11-13 03:12:20

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

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 diesem HTML-Struktur:

<body 

<?php body_class(); ?>> 

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

    <div id="pageborders"> 

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

Quelle

2011-02-02 07:28:46 rachel

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

Obviou schlau, das muss nicht nur für den Körper der Website sein, Sie können das für jedes Div verwenden, das Sie wollen.

Hoffe, dass hilft! Es gibt einen Beitrag in meinem Blog, der darüber ein wenig ausführlicher spricht, falls jemand weitere Anweisungen oder Hilfe braucht - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

Quelle

2011-03-11 02:48:28 TheLibzter

Beachten Sie, dass dies nur mit Hintergrund und nicht mit Hintergrundbild funktioniert –

Verwendung dieses

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

Quelle

2013-07-23 08:27:10

#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 einfach mehrere Bilder mit CSS3 hinzufügen. Wir können hier im Detail lesen http://www.w3schools.com/css/css3_backgrounds.asp

Quelle

2016-04-06 18:05:05 Rinku

Kann ich mehrere Hintergrundbilder mit CSS verwenden?

Antwort

Verwandte Themen