CSS3 Filter指的是一種可以通過CSS樣式來對HTML元素進行圖像處理的技術,可以實現一些圖片變形效果。CSS3 Filter主要包括以下一些設置。
/* 灰度化 */ filter: grayscale(100%); /* 飽和度 */ filter: saturate(5); /* 亮度 */ filter: brightness(200%); /* 對比度 */ filter: contrast(200%); /* 模糊 */ filter: blur(5px); /* 透明 */ filter: opacity(50%); /* 反轉 */ filter: invert(100%); /* 色調 */ filter: hue-rotate(180deg); /* 陰影 */ filter: drop-shadow(5px 5px 5px gray);
其中,以上每個屬性的數值可以根據需求進行調整,每個屬性值都有一定的程度范圍。比如像模糊效果的blur屬性,可以設置成小數,小數越大,模糊程度越深。
注意:CSS3 Filter并不是所有的瀏覽器都支持的屬性,一些舊版本的瀏覽器,如IE8及以下,不支持CSS3 Filter。
可以通過以下代碼,來針對不同瀏覽器進行不同的CSS3 Filter設置:
/* 先針對標準瀏覽器進行CSS3 Filter設置 */ .myclass { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } /* 再針對IE瀏覽器進行顏色轉換 */ .myclass { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* 其他的IE濾鏡設置 */ }
以上代碼中,針對標準瀏覽器進行CSS3 Filter設置,同時也針對IE瀏覽器進行顏色轉換。這樣就能確保在不同瀏覽器中,都可以正常顯示CSS3 Filter的效果。
上一篇angular 和PHP
下一篇php inval