滿背景圖像背景圖像y軸上重複

我想要一個背景黃色背景黃色的全寬背景圖像我想顯示具有一些形狀的背景圖像。我想在y軸上重複背景圖像以顯示重複整個寬度的形狀。例如，當最後一個形狀出現時，圖像中有5個形狀，我想再次顯示另外一組5個形狀。你知道如何做到這一點？滿背景圖像背景圖像y軸上重複

Im做喜歡這一點，但沒有成功：

https://jsfiddle.net/0r8c849u/2/

HTML：

<section class="container content-searchh"> 
    <div class="div"> 
    <h1>Title</h1> 

    </div> 
    <section>

CSS：

.content-searchh{ 
    height: 100%; 
    width: 100%; 
    position: relative; 
    background-image: url(https://image.ibb.co/dhdBcv/img2.png); 
    background-color:yellow; 
    min-height:360px; 
    background-repeat:repeat-y; 
    background-size:contain; 

    }

我想要的效果是這樣的，我在那裏有帶有一些不透明度的黃色背景，以便與該sh背景圖像猿出現，但有點透明。我希望形象在圖像完成後重複出現另一組形狀。

來源

2017-07-14 Jone

期望的結果是不夠清晰。你可以添加一張照片嗎？ –

感謝您的回答。我更新了這個問題。 – Jone

請看snipet。

.content-search { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    background: rgba(255, 255, 0, .54); 
 
    min-height: 360px; 
 
} 
 

 
.content-search:after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: url(https://image.ibb.co/dhdBcv/img2.png) 0 0/auto 50%; 
 
    opacity: .25; 
 
} 
 

 
.div { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
}

<section class="container content-search"> 
 
    <div class="div"> 
 
    <h1>Title</h1> 
 

 
    </div> 
 
    <section>

來源

2017-07-14 21:40:57

謝謝，就是這樣！ – Jone

滿背景圖像背景圖像y軸上重複

回答

相關問題