用css多重背景，只重复一个背景

需要一些CSS背景重复的帮助。下面是我试图实现的功能的线框。用css多重背景，只重复一个背景

enter image description here

目前代码：

HTML：

<div class="wrapper"> 
    <div class="container"></div> 
</div>

CSS：

.container{ 
    min-height: 10000px; 
    background-image: url(background1.png), url(background2.png); 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center 1000px; 
}

当前的代码显示background1只是一个时间和重复background2，我想，但background2图像从页面顶部开始。我希望它在background1图像结束后正好开始，如线框中所示。

注意：图像background1和background2都具有透明形状，这使得其他图像在背景中可见。

来源

2015-01-12 Abhay Desai

你的意思是background2从页面底部开始，因为你在CSS中声明了“bottom”？ – BoltClock

bottom只是一个尝试，我希望它在background1图像结束后正好开始。@ BoltClock –

您需要一个伪元素 – vals

如果你设置背景重复，它不能是有限（据我所知）

的解决办法是将其限制在一个伪元素，并限制这个伪元素，你想让它（与顶部属性）

.test { 
 
    width: 300px; 
 
    height: 600px; 
 
    border: solid black 1px; 
 
    position: relative; 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 200px; 
 
    background-image: url(http://placekitten.com/g/600/400); 
 
    background-repeat-y: repeat; 
 
}

<div class="test"></div>

需要注意的是100％的高度是不准确的，如果你希望它是准确的设置到您的维度

来源

2015-01-12 17:23:50 vals

感谢它的工作！ :) –

用css多重背景，只重复一个背景

回答

相关问题