CSS3中filter屬性的使用方法

小編給大家分享一下CSS3中filter屬性的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近在修改內(nèi)網(wǎng)門戶的時(shí)候，恰好遇到了需要使用濾鏡的地方；剛開(kāi)始用的是兩張圖片；鼠標(biāo)滑過(guò)背景變成漸變；圖標(biāo)切換；但是后臺(tái)配置了圖標(biāo)后；導(dǎo)致鼠標(biāo)滑過(guò)圖標(biāo)不能正常切換；于是就想到了濾鏡的效果來(lái)處理。

使用濾鏡：

前言

css3的濾鏡filter屬性，可以對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行類似Photoshop圖片處理的效果，通過(guò)css對(duì)圖像進(jìn)行處理。

瀏覽器支持情況：只有IE瀏覽器不支持filter（濾鏡）屬性，為了兼容低版本的safari和google瀏覽器，需要加上前綴-webkit- 。

常用屬性

使用語(yǔ)法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

CSS 濾鏡可以給同個(gè)元素同時(shí)定義多個(gè)，例如 filter: contrast(150%) brightness(1.5) ，但是濾鏡的先后順序不同產(chǎn)生的效果也是不一樣的；

默認(rèn)值為： initial

inherit 表示從父級(jí)繼承。

注意:濾鏡通常使用百分比 (如：75%), 當(dāng)然也可以使用小數(shù)來(lái)表示 (如：0.75)。

normal 正常

未添加濾鏡

<div data-filter="image-normal">
 <h3>normal</h3>
 <img src="1.jpg">
</div>

grayscale 灰階

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無(wú)變化。若未設(shè)置，值默認(rèn)是0。也可以寫0-1之間的小數(shù)。

<div data-filter="image-grayscale">
 <h3>grayscale</h3>
 <img src="1.jpg">
</div>


//值為0-1之間的小數(shù),  grayscale(0) 原圖；grayscale(1）完全變成灰色；
[data-filter=image-grayscale] img {
  filter: grayscale(50%);
  -webkit-filter：grayscale(50%);  /* Chrome, Safari, Opera */
}

saturate 飽和度

值為0時(shí)顯示黑白色，值為0.5時(shí)飽和度為原圖的一半，值為1時(shí)，表示飽和度等于原圖，數(shù)值大于1表示飽和度加強(qiáng)。

//（值為0-1之間的小數(shù)）
<div data-filter="image-saturate">
 <h3>saturate</h3>
 <img src="1.jpg">
</div>

飽和對(duì)是對(duì)色彩的濃度（純度）的定義。飽和度畫面中色彩的鮮艷程度與層次；

[data-filter=image-saturate] img {
  filter: saturate(360%);
  -webkit-filter：saturate(360%); /* Chrome, Safari, Opera */
}

sepia 棕褐色

0表示褐色度為0%，顯示原圖，1 表示褐色度為100%顯示褐色。

<div data-filter="image-sepia">
 <h3>sepia</h3>
 <img src="1.jpg">
</div>

[data-filter=image-sepia] img {
  filter: sepia(100%);
  -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
}

invert 反色

反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價(jià)值是完全反轉(zhuǎn)。值為0%則圖像無(wú)變化。值在0%和100%之間，則是效果的線性乘子。 若值未設(shè)置，值默認(rèn)是0。

<div data-filter="image-invert">
 <h3>invert</h3>
 <img src="1.jpg">
</div>

[data-filter=image-invert] img {
  filter: invert(100%);
  -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
}

opacity 透明度

圖像的透明程度。值為0%則是完全透明，值為100%則圖像無(wú)變化。0-100%之間則是部分透明。也可以用0-1之間的小數(shù)替代%。與已有的opacity屬性很相似，不同之處在于通過(guò)filter，一些瀏覽器為了提升性能會(huì)提供硬件加速。

<div data-filter="image-opacity">
 <h3>opacity</h3>
 <img src="1.jpg">
</div>

[data-filter=image-opacity] img {
  filter: opacity(50%);
  -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
}

brightness 亮度

使圖片更亮或更暗。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。值超過(guò)100%，圖像會(huì)比原來(lái)更亮。如果沒(méi)有設(shè)定值，默認(rèn)是1。可以使用百分比也可以使用小數(shù)表示。

<div data-filter="image-brightness">
 <h3>brightness</h3>
 <img src="1.jpg">
</div>

[data-filter=image-brightness] img {
  filter: brightness(120%);
  -webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
}

contrast 對(duì)比度

調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒(méi)有設(shè)置值，默認(rèn)是1?？梢允褂冒俜直纫部梢允褂眯?shù)表示。 對(duì)比度是對(duì)畫面明暗程度的定義。對(duì)比度是指畫面黑白明暗的層次。

<div data-filter="image-contrast">
 <h3>contrast</h3>
 <img src="1.jpg">
</div>

[data-filter=image-contrast] img {
  filter: contrast(160%);
  -webkit-filter: contrast(160%); /* Chrome, Safari, Opera */
}

hue-rotate 色相旋轉(zhuǎn)

給圖像應(yīng)用色相旋轉(zhuǎn)。讓圖像中的顏色，在色相環(huán)中做對(duì)應(yīng)的旋轉(zhuǎn)。值為0deg，則圖像無(wú)變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒(méi)有最大值，超過(guò)360deg的值相當(dāng)于又繞一圈。

<div data-filter="image-hue-rotate">
 <h3>hue-rotate</h3>
 <img src="1.jpg">
</div>

[data-filter=image-hue-rotate] img {
  filter: hue-rotate(160deg);
  -webkit-filter: hue-rotate(160deg); /* Chrome, Safari, Opera */
}

blur 模糊

給圖像設(shè)置高斯模糊。值越大越模糊，默認(rèn)是0，就是不模糊。

<div data-filter="image-blur">
 <h3>blur</h3>
 <img src="1.jpg">
</div>


[data-filter=image-blur] img {
  filter: blur(2px);
  -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
}

drop-shadow 陰影

與 box-shadow屬性很相似；不同之處在于，通過(guò)濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速。

<div data-filter="drop-shadow">
 <h3>blur</h3>
 <img src="1.jpg">
</div>

[data-filter=drop-shadow] img {
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
}

對(duì)比box-shadow

添加陰影屬性。

<div data-filter="box-shadow">
 <h3>blur</h3>
 <img src="1.jpg">
</div>

/* 添加陰影效果*/
[data-filter=box-shadow] img {
  box-shadow:16px 16px 20px blue;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome, Safari, Opera */
}

box-shadow和drop-shadow 還是有區(qū)別的；效果上看 box-shadow 是給整個(gè)圖片加陰影，而 drop-shadow 只是給不透明的部分加陰影 。

multiple 多個(gè)濾鏡效果

<div data-filter="multiple-filter">
 <h3>blur</h3>
 <img src="1.jpg">
</div>

/*調(diào)整按鈕和圖片的亮度和對(duì)比度*/
[data-filter=multiple-filter] img {
   filter: contrast(175%) brightness(3%);
   -webkit-filter: contrast(175%) brightness(3%);/* Chrome, Safari, Opera */
}

融合效果

/* blur 混合 contrast 產(chǎn)生融合效果 */
.filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
}
.filter-mix::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
}

.filter-mix::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3F51B5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
}

@keyframes filterBallMove {
    50% {
        left: 140px;
    }
}

@keyframes filterBallMove2 {
    50% {
        right: 140px;
    }
}

火焰效果

filter: contrast() 與 filter: blur() 和animation 配合制作火焰效果。

filter: blur(20px) contrast(30);

animation: move 2s infinite 0.2s linear;

scss濾鏡樣式

$filters: (
 grayscale: '(50%)',//灰階
 saturate: '(360%)',//飽和度
 sepia: '(100%)',//棕褐色
 invert: '(100%)',//反色
 opacity: '(50%)',//透明度
 brightness: '(120%)',//亮度
 contrast: '(160%)',//對(duì)比度
 hue-rotate: '(160deg)', //色相旋轉(zhuǎn)
 blur: '(2px)',//模糊  
 drop-shadow:'drop-shadow(16px 16px 20px blue)',//陰影
);

@each $type, $value in $filters {
 [data-filter="image-#{$type}"] {
  img {
       filter: #{$type}#{$value};
  }
 }
}

以上是“CSS3中filter屬性的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！