html – 删除圆形图像周围的边框

概述我有一个圆形图像(.png文件),中间是透明的.我需要使图像内的背景为纯色.为此,我将背景固定,然后将border-radius：50％,但这会创建一个丑陋的小白线.反正有没有摆脱这个,还是我必须在图像编辑器中手动着色图像？ div { width: 500px; height: 500px; background: black;}div img { margin: 100px 我有一个圆形图像(.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/

解决方法 问题不在于图像.图像是透明的,完全没有背景.问题是由背景引起的：白色和border-radius：50％添加到图像元素.这是由于浏览器中的抗锯齿像素,并且与 this thread中描述的问题相同.

解决方案是使用某种方法将背景部分填充到元素而不是完全填充(即,足以覆盖直到图像上已存在的黑色圆圈).由于img标签不能具有伪元素(至少它不能跨浏览器工作),最好的选择是使用径向渐变作为背景,如下面的代码片段所示.

注意：厚绿色边框仅用于演示,可以删除而没有任何副作用.

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>

总结

以上是内存溢出为你收集整理的html – 删除圆形图像周围的边框全部内容，希望文章能够帮你解决html – 删除圆形图像周围的边框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。