如何根據圖像形狀裁剪<tr>背景？

-1

如何實現類似上述圖像。下面的灰色塊在中間被裁剪成半圓形以適應圖像。我應該使用CSS動畫或其他任何東西來獲得這種效果？以便下面的元素的背景可以根據圖像形狀進行裁剪。

2017-09-09 Nikhil Bharadwaj

歡迎堆棧溢出 - 有你真好。請閱讀[我如何提出一個好問題？]（https://stackoverflow.com/help/how-to-ask）和[如何創建一個最小，完整和可驗證的示例]（https：// stackoverflow。 com/help/mcve）幫助將Stack Overflows內容保持在最高級別，並增加獲得正確答案的機會。 – Axel

你可以在圖像上放置邊框 - >白色，不需要裁剪任何東西。使用位置絕對。 – bhansa

使用position:absolute;作爲圖像圖標，並將其放置在兩個div之間，而不是裁剪，您可以給background:#fff和填充以使其看起來像。

見下面的代碼：

.main{ 
 
    position:relative; 
 
    height: auto; 
 
} 
 
.upper { 
 
    background: #eee; 
 
    height: 100px; 
 
} 
 

 
.lower { 
 
    background: #ccc; 
 
    height: 100px; 
 
} 
 

 
img.icon { 
 
    position: absolute; 
 
    top: 40%; 
 
    left:50%; 
 
    background: #fff; 
 
    border-radius:50%; 
 
    padding:2px; 
 
}

<div class="main"> 
 
    <div class="upper"></div> 
 
    <img class="icon" src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-24/48/1200-512.png" width="50" /> 
 
    <div class="lower"></div> 
 
</div>

的jsfiddle：https://jsfiddle.net/75euot8d/1/

來源

2017-09-09 10:31:12 bhansa

謝謝，這就是我正在看的。 –

如何根據圖像形狀裁剪<tr>背景？

回答

相關問題