您可以在模糊影像的同時保持其邊緣清晰嗎？

使用 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>

HTML:

此解決方案。模糊影像在具有隱藏溢出的div 中。透過在影像上設定負邊距，我們在 div 內對其進行偏移，從而顯示原始的、不模糊的邊緣。

示範：

[具有定義邊緣的模糊影像的影像]

• 怎麼樣有效：
• div 防止模糊影像溢出其邊界。

負邊距將影像稍微向內推，露出不模糊的外緣。

模糊濾鏡套用於影像，在保留邊緣的同時增加深度完好無損。 此技術可有效模擬「嵌入模糊」效果，提供所需的模糊和清晰度組合。

以上是您可以在模糊影像的同時保持其邊緣清晰嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！