修剪圆形模糊图像的不良边缘

Question

有一些关于裁剪方形图像边缘的帖子，但是没有关于以圆形的形状显示图像的帖子。

不幸的是，这里提出的解决方案（链接）不起作用，因为它会砍掉圆形的一部分。

这里是一个使用上述解决方案的JSFiddle：（链接）

CSS：

.fix {
     margin: -5px -10px;
}

.avatar {
    width: 128px;
    -webkit-filter: blur(5px);
    border-radius: 50%;
}

基本上，我正在努力使一个模糊的圆形图像具有清晰的边框。

- Hobbyist

---

在其上面叠加一张图像，并在图像中切出一个圆形，怎么样？ - codedude

@codedude - 进一步扭曲图像，导致颜色变得极其暗淡。 - Hobbyist

Answer 1

你需要将模糊效果设置给图片，并将边框半径设置给容器：

http://jsfiddle.net/t1e1s5hb/

HTML

<div class="avatar">
    <img class="fix" src="http://pickaface.net/avatar/Opi51c7dccf270e0.png" width="150">
</div>

CSS

.fix {
    margin: -5px -10px;
    -webkit-filter: blur(5px);
}

.avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
}

- hmak.me

---

这会在添加任何额外的缩放CSS时剪切图像的部分，你能否提供一个解决方案？JSFiddle：http://jsfiddle.net/y0jnc9tb/3/ - Hobbyist

这是一个屏幕截图，显示了我的问题边框，同时在此事件中，图像底部被切断了。http://gyazo.com/f02614945293cf44cdb708e554779cfb - Hobbyist

你应该为容器添加缩放功能。 - hmak.me

裁剪是因为你的边距设置不正确。边距应该从左侧和顶部设置为-BlurRadius。而且你的尺寸必须比Width + (2*BlurRadius)大两倍。 - hmak.me

Answer 2

目前它的兼容性不太好，但这是未来的趋势：

img {
    -webkit-filter: blur(5px);
    -webkit-clip-path: circle(50% at center);
}

<img src="http://pickaface.net/avatar/Opi51c7dccf270e0.png"/>

（适用于 Chrome 43）

- jcuenod

---

我相信这个答案将在2到3年后帮助到人们，当浏览器跟上步伐的时候。不幸的是，我必须支持从Android 2.3和iPhone3gs开始的所有代理浏览器。 - Hobbyist

一个简单的现代解决方案，截至2021年9月，在大多数浏览器中具有超过97%的支持（已加前缀）。 - Nathan