使用 CSS3 滤镜模糊图像时如何保持边缘锐利？

保持使用 CSS3 滤镜模糊定义的边缘

使用 CSS3 将滤镜：blur() 属性应用于图像时，图像也会变得模糊。如果您想在模糊图像其余部分的同时保留锐利边缘，这可能并不理想。

解决方案：带有隐藏溢出的负边距

要在实现锐利边缘的同时模糊图像，您可以将其包含在

中并对 应用负边距元素。该技术涉及设置溢出：隐藏；在

上，将模糊图像保持在其边界内：

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;
}

此方法会生成 输出，其中图像边缘保持清晰，而图像的其余部分则模糊。 上的负边距元素充当图像周围的“缓冲区”，确保模糊效果不会超出这些边界。

演示：

[一只小猫的图像锐利的边缘和模糊的背景]

HTML:

<div>
  <img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/300" class="lazy" alt="使用 CSS3 滤镜模糊图像时如何保持边缘锐利？" >
</div>

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