Question

我有一个圆形图像（.png文件），中间是透明的。我需要使图像内的背景为纯色。为此，我将背景固定，然后放border-radius:50%，但这会产生一条丑陋的小白线。反正有没有摆脱这个，还是我必须在图像编辑器中手动着色图像？

＆＃13;

div {
  width: 500px;
  height: 500px;
  background: black;
}
div img {
  margin: 100px;
  max-width: 50%;
  background: white;
  border-radius: 50%;
}

＆＃13;

<div>
  <img src="http://i.imgur.com/sDU7Lhz.png">
</div>

＆＃13;

在这里小提琴：https://jsfiddle.net/h3nwkoe1/

Answer 1

问题不在于图像。图像是透明的，完全没有背景。问题是由background: white和border-radius: 50%添加到图像元素引起的。这是由于浏览器中的抗锯齿像素，并且与this thread中描述的问题相同。

解决方案是使用某种方法将背景部分地填充到元素而不是完全填充（即，足以覆盖直到图像上已存在的黑色圆圈）。由于img标记不能包含伪元素（至少它不能跨浏览器工作），因此最好选择使用radial-gradient作为背景，如下面的代码段所示。

注意：厚绿色边框仅用于演示，可以在没有任何副作用的情况下删除。

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>

Answer 2

我完全同意Harry的解释。

另一种解决方法可能是将图像封装在比图像略小的div中（如每边1px），这样使用border-radius形成的圆小于图像上的外部黑色圆圈。

比哈利提出的解决方案有点麻烦。但它可能是梯度的替代品。

div#black {
  width:500px;
  height:500px;
  background:black;
  border: solid black 1px;
  box-sizing: border-box;
}

div#circle {
  margin: 100px;
  width: 250px;
  height: 250px;
  background: white;
  border-radius: 50%;
  text-align: center;
}

div#circle img {
  width: 252px;
  height: 252px;
  margin-left: -1px;
  margin-top: -1px;
}

<div id="black">
  <div id="circle">
    <img src="http://i.imgur.com/sDU7Lhz.png">
  </div>
</div>

删除圆形图像周围的边框

2 个答案: