如何使用 CSS3 滤镜模糊图像而不弄脏边缘？

CSS3 滤镜：如何在不弄脏边缘的情况下模糊图像

使用 CSS3 滤镜模糊图像时，图像的边缘也可能会变得模糊。如果您想在创建模糊效果的同时保持清晰的边缘，这可能是不可取的。

为了解决这个问题，一个聪明的解决方案是将图像放在

中。元素并调整其边距。通过设置

的overflow属性要隐藏，您可以将图像裁剪为所需的尺寸。

CSS代码：

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

div {
  overflow: hidden;
}

说明：

• margin 属性设置图像周围的边距，它以相等的距离偏移模糊边缘amount。
• overflow：hidden 属性可防止图像溢出到
  的边界之外，从而创建类似于插入模糊的效果。

  示例:

  [直播演示](https://jsfiddle.net/NI3c4/)

  HTML:

  <div>
    <img src="path/to/image.jpg" />
  </div>

  结果:

  图像被模糊并具有定义的边缘，因为模糊区域包含在

  内。元素。

以上是如何使用 CSS3 滤镜模糊图像而不弄脏边缘？的详细内容。更多信息请关注PHP中文网其他相关文章！