如何 - 添加圖像效果

了解如何視覺效果添加到圖像。

CSS濾鏡

CSS的filter屬性添加的視覺效果(like blur and saturation)的元素。

注：在Internet Explorer中，邊緣12或Safari 5.1和更早版本不支持濾鏡屬性。

灰度例

改變所有圖像為黑色和白色的顏色(100% gray) ：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Original image

grayscale(100%)

試一試»

模糊示例

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

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Original image

blur(5px)

試一試»

請訪問我們的CSS filter Property ，以了解更多關於CSS濾鏡。