在第一个图像下重复第二个背景图像

我试图在一个<div>图层中使用background-image的两个实例。第一个background-image（部分透明）应显示在<div>的top，第二个应直接显示在第一个background-image（此作品）下。在第一个图像下重复第二个背景图像

应有的动态内容与高度为1px的第二张图片应垂直重复（repeat-y），并在第一张background-image下开始重复。我的问题是，当我尝试重复第二个background-image它在整个<div>层上重复。

.mainFrameRoundBorder { 
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png); 
    background-repeat: no-repeat, repeat-y; 
    border-radius: 0 0 0 0; 
    box-shadow:0 0 0 0; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-position: center top, 0px 364px; 
    margin-top:10px; 
    padding: 6px 15px; 
    overflow: hidden; 
    color: #FFFFFF; 
}

来源

2012-01-08 user1137236

请发表小提琴...您的描述不是很明确。 – pixelass 2012-01-08 16:17:40

对不起，你是什么意思与小提琴？ – user1137236 2012-01-08 17:15:29

http://jsfiddle.net使用此服务来制作一个代码的小例子。我在这里为你开始了一个：http://jsfiddle.net/pixelass/E9Xbu/ – pixelass 2012-01-08 17:33:43

我会建议使用：之前或之后：伪选择器。您可以像往常一样将重复背景放在div上，然后将非重复背景放在伪选择器元素中。

本教程应该能够给你这个方法一些好的指针：

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

来源

2012-01-08 16:20:59 mbxtr

这通常工作，我的问题是，顶部的图片是部分透明的，所以后面的重复图像会闪闪发光。 – user1137236 2012-01-08 16:53:01

那么你是说你想要第二个图像重复，但只有在第一个图像开始后才开始重复？ – mbxtr 2012-01-09 16:27:21

差不多，我想第二个图像开始重复，当第一个图像结束。例如第一个图像的高度为300px，第二个图像的高度为50px。 Div具有500px的高度，第二个图像应该在300px之后开始重复（在第一个图像下），在这个计算中它应该重复4次。我现在拥有的是重复10次（也是在第一张图片后面重复）。 – user1137236 2012-01-10 15:35:44

我会建议你使用z-index

来源

2012-01-08 19:09:40

在第一个图像下重复第二个背景图像

回答

相关问题