與其他圖像的CSS切割圖像

我有這個div。與其他圖像的CSS切割圖像

.a { 
 
    background-image: url(url_image); 
 
    height: 400px; 
 
    background-position: bottom; 
 
    background-attachment: scroll 
 
}

<div class="a"> 
 
    <div class="b"> 
 
    <div class="content1"> 
 
    </div> 
 
    <div class="content2"> 
 
    </div> 
 
    <div class="content3"> 
 
    </div> 
 
    </div>

的.a圖像有不規則的邊緣：

我需要把一個背景圖像div的.b並獲得這樣的：

這可能嗎？

來源

2017-05-08 Ajex_12

您是否閱讀過以下文章？ [其他SO問題]（http://stackoverflow.com/questions/18792402/css-webkit-mask-image），[CSS技巧的方法]（https://css-tricks.com/clipping-masking-css/ ），[HTML5 Rocks Article]（https://www.html5rocks.com/en/tutorials/masking/adobe/）。我相信這是可能的，但不完全知道如何。不知道是否有任何文章會幫助你，這就是爲什麼我發佈這個評論，而不是一個答案。 –

您需要翻轉兩個圖像。背景圖片需要進入.a，不規則邊框圖片需要在.b。把它想象成畫一幅畫，從背景開始，然後添加前景。前景圖像需要有透明背景，以便您可以看到背景圖像。（這將成爲上述不規則背景圖像的藍色部分）

.a { 
    background-image: url(myImage); 
    background-size: 100% 100%; 
    height: 400px; 
    background-position: bottom; 
    background-attachment: scroll 
} 
.b{ 
    background-image: url(irregularBorder); 
    background-size: 100% 100%; 
    height: 400px; 
    background-position: bottom; 
    background-attachment: scroll; 
}

來源

2017-05-08 15:10:45 Nick

與其他圖像的CSS切割圖像

回答

相關問題