您可以在模糊图像的同时保持其边缘清晰吗？

使用 CSS3 滤镜模糊背景定义边缘

模糊图像会增加柔和度和深度，但通常会损害边缘的清晰度。我们能否在保持清晰轮廓的同时实现模糊效果？

解决方案：使用 Overflow 和 Negative 的 Div边距

CSS:

div {
  overflow: hidden;
}

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

HTML:

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

此解决方案放置模糊图像在具有隐藏溢出的 div 中。通过在图像上设置负边距，我们在 div 内对其进行偏移，从而显示原始的、不模糊的边缘。

演示：

[具有定义边缘的模糊图像的图像]

怎么样有效：

• div 防止模糊图像溢出其边界。
• 负边距将图像稍微向内推，露出不模糊的外边缘。
• 模糊滤镜应用于图像，在保留边缘的同时增加深度完好无损。

该技术有效地模拟“嵌入模糊”效果，提供所需的模糊和清晰度组合。

以上是您可以在模糊图像的同时保持其边缘清晰吗？的详细内容。更多信息请关注PHP中文网其他相关文章！