css zwei Hintergrundbilder

Art von neu zu css, aber ich habe ein Bild, das ich oben links Ecke und dann ein anderes Bild möchte ich danach zu wiederholen. Zur Zeit müde I:css zwei Hintergrundbilder

CSS

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
    height: 200px; /*Height of top section*/ 
    color: White; 
    text-align:center 
} 

#topsection a{ 
    color: #FFFF80; 
} 

#topsection h1{ 
    margin: 0; 
    padding-top: 25px; 
    text-align:Left 
} 

#topsection h2{ 
    margin: 0; 
    padding-top: 0px; 
    text-align:Center 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>IG Indy Gamers</title> 
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />  
</head> 
<body> 
<div id="maincontainer"> 

<div id="topsection" > <div class="innertube"> 
    <h1>IG -Indy Gamers </h1> 
    <FONT style="BACKGROUND-COLOR: blue"><p align='right'><a href="#"> &nbspSignup</a> </font>/<a href='Login.html' id='LoginContent' >Login </a></p> 
    <ul id="list-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Reviews</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Forums</a></li> 
     <li><a href="#">Demo's</a></li> 
     <li><a href="#">Members</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

</div></div>

aber das zweite Bild nur Kopien über die erste. Können Sie einen anderen Weg vorschlagen, dies zu tun? Ich habe gehört, dass Schichten verwendet werden, aber ich weiß noch nichts darüber.

Quelle

2012-08-06 Glen Morse

Sieht aus wie CSS3 unterstützt multiple background images; legen Sie sie durch Kommas getrennt:

background: url('banner1.jpg'), url('banner2.jpg'); 
background-position: left top, left top; 
background-repeat: no-repeat, repeat;

Wiedergabe mit background-position, bis es das tut, was Sie wollen.

IE < 9 unterstützt diese Funktion nicht.

Quelle

2012-08-06 00:29:41

Das hat funktioniert Danke! –

Dieses Q half mir auch beim Kämmen von Farbverlauf mit Hintergrundbild http://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image –

Wusste das nicht, danke. –

Sie müssen 2 enthaltende Elemente erstellen: 1 für das sich wiederholende Bild. Und eine zweite für das Bild oben links.

Mit anderen Worten, etwas entlang der Linien von:

<div class="repeatingBgImage"> 
    <div class="otherBgImage"> 
    <!-- content --> 
    </div> 
</div>

CSS arbeitet in einer, nun ja, Kaskadierung Weise. Alles, was Sie können erklären, und wird durch die nächste Zeile in der Anweisung überschrieben werden, das heißt,

.someClass { 
    color: yellow; 
    color: blue; 
}

Die endgültige Farbe des Textes wird blau, nicht grün (gelb + blau = grün).

Ihre Probe gegeben ...

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
}

... wird das Hintergrundbild immer bannerBGl.jpg und repeat-x sein, da sie niedriger in der Erklärung des CSS ist, so dass das vorherige bg Bild überschrieben werden und Erklärung wiederholen.

Quelle

2012-08-06 00:28:02

Wenn Sie neue Browser verwenden, kann css3 nun zwei Hintergrundbilder auf ein Element anwenden. Sie können diese ein

aus

http://www.css3.info/preview/multiple-backgrounds/

Quelle

2012-08-06 00:29:59 index

Sie

/*TOPSECTION */ 
#topsection{ 
background: url('../images/bannerBGs.jpg'); 
background-repeat:no-repeat; 
background: url('../images/bannerBGl.jpg'); 
background-repeat:repeat-x; 
height: 200px; /*Height of top section*/ 
color: White; 
text-align:center 
}

dieses

background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg'); 
background-repeat: no-repeat, repeat-x; 
background-position: left top , 20px 30px; 
//background-position adjust second value which in px until you meet your requirment

Dank versuchen CSS überprüfen!

Quelle

2013-07-23 08:36:16

css zwei Hintergrundbilder

Antwort

Verwandte Themen