如何創建：添加圖像效果

學習如何為圖像添加視覺效果。

圖像濾鏡

CSS filter 屬性向元素添加視覺效果（如模糊和飽和度）。

注意：Internet Explorer、Edge 12 或 Safari 5.1 及更早版本不支持 filter 屬性。

將所有圖像的顏色更改為黑白（100% 灰色）：

原始圖像

灰度（100%）

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

對所有圖像應用模糊效果：

原始圖像

模糊處理（5像素）

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}