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

HTML:

以上是使用 CSS3 濾鏡模糊影像時如何保持邊緣銳利？的詳細內容。更多資訊請關注PHP中文網其他相關文章！