css 两张背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11821285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css two background images
提问by Glen Morse
Kind of new to css but I have one image I want on top left corner and then another image I want to repeat after that. Currently I tired:
对 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
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="#">  Signup</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>
but the second image just copies over the first. Can you suggest another way to do this. I heard using layers may do it but I know nothing about that yet.
但是第二个图像只是复制了第一个图像。你能建议另一种方法来做到这一点。我听说使用图层可以做到这一点，但我对此一无所知。
回答by Christian Mann
Looks like CSS3 supports multiple background images; you specify them separated by commas:
貌似 CSS3 支持多背景图片；您指定它们以逗号分隔：
background: url('banner1.jpg'), url('banner2.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
Play with background-positionuntil it does what you want.
玩background-position直到它做你想要的。
IE < 9 does not support this feature.
IE < 9 不支持此功能。
回答by Metro Smurf
You'll need to create 2 containing elements: 1 for the repeating image. And a 2nd for the image in the top left.
您需要创建 2 个包含元素：1 个用于重复图像。左上角的图像是第二个。
In other words, something along the lines of:
换句话说，类似于以下内容：
<div class="repeatingBgImage">
<div class="otherBgImage">
<!-- content -->
</div>
</div>
CSS works in a, well, cascading manner. Anything you declare can and will be overwritten by the next line in the statement, i.e.,
CSS 以一种很好的级联方式工作。您声明的任何内容都可以并且将被语句中的下一行覆盖，即，
.someClass {
color: yellow;
color: blue;
}
The final color of the text will be blue, not green (yellow+blue=green).
文本的最终颜色将是蓝色，而不是绿色（黄色+蓝色=绿色）。
Given your sample...
鉴于您的样本...
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
}
... the background image will always be bannerBGl.jpgand repeat-xsince it is lower in the declaration of the CSS, thus overwriting the previous bg image and repeat declaration.
...背景图像将始终是bannerBGl.jpg，repeat-x因为它在 CSS 的声明中较低，因此会覆盖之前的 bg 图像并重复声明。
回答by index
If you're targeting new browsers, css3 now can apply two background images on one element. You might want to check this one out
如果您的目标是新浏览器，css3 现在可以在一个元素上应用两个背景图像。你可能想看看这个
回答by code.rider
you css
你的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
}
try this
尝试这个
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
Thanks!
谢谢！
