背景图像（图案）重复只有一半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％。