在n长度上的重复效果

Question

我有这个<div>与radial-gradient就可以了，但我不希望它在所有的<div>，而是我希望它减少一些，然后重复。

So to be clear I don't want the gradient to stretch over the div like this
But rather repeat across the div at a certain height like this

Answer 1

您需要选择，类或ID添加到您的股利。

.container{ 
    height: 500px; 
    background: red; 
    background: radial-gradient(red, yellow); 
    width: 100%px; 
} 

.content{ 
    position:absolute; 
    top: 20%; 
    left: 35%; 
    width: 300px; 
    height: 150px; 
    background: 
} 


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

请忽略的位置，等.. 只有着眼于类容器和内容。渐变背景的CSS只会影响拥有该类的div。

检查：JSFiddle