在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