如何根据图像形状裁剪<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>背景？

回答

相关问题