css3 filter濾鏡屬性

2022-07-12 00:15:13 字數 1576 閱讀 8419

## css3 filter濾鏡屬性

注:ie瀏覽器暫不支援

### 1.灰度 grayscale(value)

值為百分比,在0%到100%之間,值為100%則完全轉為灰度影象,值為0%影象無變化,預設值是0%;

### 2.色相 hue-rotate(value)

值為deg角度範圍無限制,色相環當到360deg後會重複0deg相同色相,預設值0deg;

### 3.模糊度 blur(value)

值為px畫素,即螢幕上以多少畫素融在一起,越大越模糊,無最大值,0最小值,預設值為0;

### 4.亮度 brightness(value)

值為百分比,如果值是0%,影象會全黑,值是100%,則影象無變化,超過100%會更亮,無上限,預設100%;

### 5.顏色翻轉 invert(value)

值為百分比,在0%和100%之間,100%是完全反轉,值為0%則影象無變化,值預設是0%;

### 6.飽和度 saturate(value)

值為百分比,如果值是0%,完全不飽和,值是100%,則影象無變化,無上限,預設100%;

### 7.做舊 sepia(value)

值為百分比,在0%和100%之間,100%是完全變褐色(舊報紙色),值為0%則影象無變化,值預設是0%;

CSS3 filter屬性學習

filter屬性 css3的fliter屬性是乙個強大的工具,開發者可用它實現很多視覺效果 該屬性提拱了如陰影和改變顏色等效果,這些效果的在元素渲染是完成 該屬性通常用於調整的呈現 乙個元素的背景或者邊框。語法 filter me blur npx 設定高斯模糊,傳入乙個畫素單位,表示模糊半徑,預設...

CSS3的濾鏡filter屬性

css3的濾鏡filter屬性,可以對網頁中的進行類似photoshop處理的效果,例如背景的毛玻璃效果 老 黑白 火焰效果等。注意 這個 drop shadow 與 box shadow 都是在說陰影,但還是有區別的,看下圖 圖中火焰的,是一張png,除了火焰以外,其他部分是透明的,我們能看見,b...

簡單說 CSS濾鏡 filter屬性

濾鏡主要是用來實現影象的各種特殊效果,css的濾鏡是很神奇的。css的濾鏡,也就是filter屬性,主要有下面這幾個屬性值 blur 模糊 brightness 亮度 注意 值是100 影象無變化。超過100 變亮,小於100 變暗。contrast 對比度 與brightness 一樣 contr...