背景圖像（圖案）重複只有一半div

Question

我有圖案的背景圖像（150 x 150）這是重複的，我希望它只能跨越我的div容器的一半。可能嗎？怎麼會這樣做呢？

我的HTML到目前爲止

<section id="hero> 
    <div class="container"> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12"> 
     <h1>title here</h1> 
     <h2>Lorem ipsum</h2> 
    </div> 
    </div> 
    </div> 
</section> 

和我（一個或多個）CSS

#hero { 
    height: 100vh; 
    background-image: url("../assets/pattern.png"); 
    background-repeat: repeat; 
} 

Answer 1

你可以在你的#hero元素創建::before僞元素，絕對把它，確保它只佔用一半的寬度。

如果您的非圖像背景部分是純色，您還可以在透明度上添加一個linear-gradient，顏色爲50％。