21

对 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>

但第二张图片只是复制了第一张。你能建议另一种方法来做到这一点。我听说使用图层可以做到这一点，但我对此一无所知。

4

4 回答 4

52

看起来 CSS3 支持多个背景图像；您指定它们用逗号分隔：

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

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

IE < 9 不支持此功能。

于 2012-08-06T00:29:41.050 回答
3

您需要创建 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 的声明中较低，因此覆盖以前的 bg 图像并重复声明。

于 2012-08-06T00:28:02.100 回答
1

如果您的目标是新浏览器，css3 现在可以在一个元素上应用两个背景图像。你可能想看看这个

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

于 2012-08-06T00:29:59.043 回答
0

你的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-23T08:36:16.893 回答