删除圆形图像周围的边框 [英] Remove border around circular image

问题描述

我有一个圆形图片（.png文件），在中间是透明的。我需要使图像内的背景为纯色。为了做到这一点，我使背景稳定，然后把 border-radius：50％，但这会创建一个丑陋的小白线。

  div {width：500px; height：500px; background：black;} div img {margin：100px; max-width：50％;背景：白色; border-radius：50％;}  

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

/ p>

这里提供： https://jsfiddle.net/h3nwkoe1/

解决方案

问题不在于图片。图像是一个透明的，没有任何背景。该问题是由添加到图像元素的 background：white 和 border-radius：50％引起的。这是由于浏览器中的抗锯齿像素，并且是此主题中描述的相同问题。 / p>

解决方案是使用一些方法来将背景部分地填充到元素而不是完全填充（也就是说，刚好足以覆盖已经存在的黑色圆图片）。由于 img 标签不能有伪元素（至少它不会工作在跨浏览器），最好的选择是使用径向渐变

注意：粗绿色边框仅适用于演示，并且可以被删除而没有任何副作用。

  div {width：500px; height：500px; background：black;} div img {margin：100px; max-width：50％;背景：径向梯度（中心圆，白色60％，透明度61％）; border-radius：50％; overflow：hidden; border：4px solid green;}  

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

/ p>

I have a round image (a .png file) which is transparent in the middle. I need to make the background inside the image a solid color. To do this, I made the background solid, and then put border-radius:50%, but this creates an ugly small white line. Is there anyway to get rid of this, or would I have to manually color the image in an image editor?

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>

Fiddle here: https://jsfiddle.net/h3nwkoe1/

解决方案

The problem is not with the image. The image is a transparent one and has no background to it at all. The problem is caused by the background: white and the border-radius: 50% added to the image element. It is due to the anti-aliasing pixel in browsers and is the same issue described in this thread.

The solution would be to use some method to fill the background partially to the element and not fully (that is, just enough to cover till the black circle that is already present on the image). Since the img tag cannot have pseudo-elements (atleast it won't work cross-browser), the best option is to use a radial-gradient for the background like in the below snippet.

Note: The thick green border is only for demo and can be removed without any side effect.

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>

这篇关于删除圆形图像周围的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！