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两个背景图片

回答

相关问题