css两个背景图像

对css来说有点陌生，但我想在左上角有一张图片，然后再重复另一张图片。现在我累了：

CSS

HTML

印地游戏玩家
IG-印地游戏玩家
/

---

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

您需要创建2个包含元素：1个用于重复图像。左上角的图像为第二个

换言之，大致如下：

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

文本的最终颜色将是蓝色，而不是绿色（黄色+蓝色=绿色）

根据你的样品

#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图像和重复声明。

看起来像CSS3支持；您可以指定它们以逗号分隔：

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

播放

背景位置

，直到它达到您想要的效果

---

IE<9不支持此功能。

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

你喜欢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  

---

谢谢

这个Q也帮助我把梯度和背景图像结合起来

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

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