一條曲線與背景圖像

一個div我堅持一個任務，我不能找到在互聯網上的任何解決方案。我有這種情況：一條曲線與背景圖像

圖片1和2有背景圖像。

我需要一個1或第2圖像有腫塊。
如果它是第一個圖像，那個凹凸應該擴展div底部並覆蓋第二個背景。
如果這將是第二格，那麼我需要像頂部的火山口/洞，並在第一格下。

我無法將我的圖像剪切爲.png/.gif，並在Photoshop中用該凹凸剪切。這些圖像被客戶端改變，所以他無法一直準備精確的圖像，所以我需要通過代碼來擴展它們。

我試圖使用徑向漸變（）背景並使用svg剪切，但Firefox不支持這些背景。

是否有可能使代碼適應所有背景圖像？

來源

2017-01-25 Mode 856

如果你不能做到這一點使用的圖像，那麼你可以使用SVG剪輯

曲線是標準的邊界半徑，這樣就可以進行調整。但請注意，在IE，Edge和Safari中這不受支持，但根據您的要求，您並沒有太多選擇 –

底部圖像是否更改？看起來像一個純色目前？ – timothyclifford

@timothyclifford，是底部div也可以與背景圖像。我發現解決方案如何在純色div中剪切像這樣的圖片，但是當bg圖片位於div中時，它無效。 –

下面是一個使用的背景大小的一個解決方案：覆蓋，所以它更容易適應。（使用已知的尺寸圖像會更容易）。

缺點是有點複雜的標記，需要3個輔助div。根據需要

.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    border: solid 1px blue; 
 
    position: relative; 
 
} 
 
.up { 
 
    width: 100%; 
 
    height: 50%; 
 
    position: relative; 
 
    border-bottom: 40px solid transparent; 
 
    background-image: url(http://lorempixel.com/600/400); 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
    background-origin: border-box; 
 
    background-clip: padding-box; 
 
    margin-bottom: -40px; 
 
} 
 
.addon { 
 
    width: 25%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    left: 37.5%; 
 
    border-radius: 0px 0px 50px 50px; 
 
    overflow: hidden; 
 
    background-image: inherit; 
 
    z-index: 2; 
 
} 
 
.addon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 400%; 
 
    height: 100%; 
 
    left: -150%; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
} 
 
.down { 
 
    width: 100%; 
 
    height: 50%; 
 
    position: relative; 
 
    bottom: 40px; 
 
    border-top: 40px solid transparent; 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: border-box; 
 
    background-clip: padding-box; 
 
    margin-top: -40px; 
 
} 
 
.addleft { 
 
    width: 37.5%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    border-radius: 0px 50px 0px 0px; 
 
    overflow: hidden; 
 
    background-color: tomato; 
 
    background-image: inherit; 
 
    background-size: 0px 0px; 
 
} 
 
.addleft:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 266.667%; 
 
    height: 100%; 
 
    left: 0px; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
} 
 
.addright { 
 
    width: 37.5%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    border-radius: 50px 0px 0px 0px; 
 
    overflow: hidden; 
 
    background-image: inherit; 
 
    background-size: 0px 0px; 
 
} 
 
.addright:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 266.667%; 
 
    height: 100%; 
 
    right: 0px; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
}

<div class="container"> 
 
    <div class="up"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="down"> 
 
    <div class="addleft"></div> 
 
    <div class="addright"></div> 
 
    </div> 
 
</div>

來源

2017-01-25 19:07:46 vals

您需要使用邊框顏色

邊框顏色：透明透明＃555透明;

基本上你需要將圖像border-color的左右邊界的某個百分比標記爲透明。

然後設置邊界半徑給曲線

感謝。

來源

2017-01-25 08:59:11

也許你可以顯示你有什麼想法？因爲我無法理解你如何讓邊界出現在中間，然後形成這種形狀。我創建了小提琴：https：//jsfiddle.net/yj7u7vLc/ –

一條曲線與背景圖像

回答

相關問題