css兩個背景圖片

一種新的css，但我有一個圖像，我想在左上角，然後我想在這之後重複的另一個圖像。目前，我累了：css兩個背景圖片

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>

但第二圖像剛過頭份。你能否建議另一種方式來做到這一點。我聽說使用圖層可能會這樣做，但我對此一無所知。

來源

2012-08-06 Glen Morse

看起來像CSS3支持multiple background images;你用逗號分隔它們：

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

玩background-position直到它做你想做的。

IE < 9不支持此功能。

來源

2012-08-06 00:29:41

這工作謝謝！ – 2012-08-06 00:36:34

這Q也幫助我與背景圖像的梯度梳理http://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image – 2014-08-07 06:28:14

不知道這一點，謝謝。 – 2016-11-20 11:26:09

您需要創建2個包含元素：1用於重複圖像。第二個是左上角的圖片。

換句話說，沿着線的東西：

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

CSS工作在，好了，級聯的方式。任何你可以聲明，將通過在聲明的下一行被覆蓋，即

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

文本的最終顏色爲藍色，不是綠色（黃+藍=綠）。

鑑於你的樣品......

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

...背景圖像將永遠是bannerBGl.jpg和repeat-x，因爲它是在CSS的聲明下，從而覆蓋以前的背景圖片，重複申報。

來源

2012-08-06 00:28:02

如果您的目標是新的瀏覽器，css3現在可以在一個元素上應用兩個背景圖片。您可能要檢查這一個

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

來源

2012-08-06 00:29:59 index

你的CSS

/*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 
}

試試這個

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

謝謝！

來源

2013-07-23 08:36:16

css兩個背景圖片

回答

相關問題