CSS如何實現圖片變模糊

在網站設計中，圖片常常是不可或缺的元素。除了使用 Photoshop 等圖形軟件處理圖片外，CSS 也可以實現一些簡單的圖片效果。其中，圖片變模糊是一種經常使用的效果。本文將介紹如何使用 CSS 實現圖片變模糊。

首先，我們先來了解一下 CSS 中的 filter 屬性。filter 屬性是 CSS3 中的一個新特性，允許我們實現一些濾鏡效果，包括模糊效果。下面是使用 filter 屬性實現圖片模糊的代碼：

.blur {
filter: blur(5px);
}

代碼中，我們給圖片的父元素添加了一個 .blur 的 class，然后在 CSS 中定義了該 class 的樣式，使用 filter 屬性設置圖片的模糊值為 5px。運行代碼后，就能看到圖片被成功模糊了。

如果我們想控制圖片模糊的程度，可以調整 blur() 函數中的數值。例如，將模糊程度調整為 10px：

.blur {
filter: blur(10px);
}

當然，這只是最簡單的使用方式。另外，filter 屬性還支持其它濾鏡效果，例如增強對比度（contrast）、改變亮度（brightness）等。使用 filter 屬性，我們可以讓圖片變得更加生動、有趣。

總之，CSS 的 filter 屬性是一個很實用的特性，可以輕松實現一些圖片效果。感興趣的讀者可以深入了解一下，挖掘出更多的精彩用法。