我有一个圆形图像（.png 文件），中间是透明的。我需要将图像内的背景设置为纯色。为此，我将背景设为纯色，然后将border-radius:50%，但这会产生一条丑陋的小白线。有没有办法摆脱这个问题，或者我必须在图像编辑器中手动为图像着色？
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: white;
border-radius: 50%;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
在这里小提琴：https://jsfiddle.net/h3nwkoe1/ https://jsfiddle.net/h3nwkoe1/
问题不在于图像。该图像是透明的，根本没有背景。该问题是由background: white和border-radius: 50%添加到图像元素。这是由于浏览器中的抗锯齿像素造成的，并且与中描述的问题相同这个线程 https://stackoverflow.com/questions/36279778/overlapping-circles-bleeding.
解决方案是使用某种方法将背景部分填充到元素而不是完全填充（即，刚好足以覆盖图像上已经存在的黑色圆圈）。自从img标签不能有伪元素（至少它不能跨浏览器工作），最好的选择是使用radial-gradient对于背景，如下面的代码片段所示。
Note:粗绿色边框仅用于演示，可以删除，没有任何副作用。
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: radial-gradient(circle at center, white 60%, transparent 61%);
border-radius: 50%;
overflow: hidden;
border: 4px solid green;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
