CSS3 filter（濾鏡）屬性使用

最近在修改內網門戶的時候，剛好遇到了須要使用濾鏡的地方；剛開始用的是兩張圖片；鼠標滑過背景變成漸變；圖標切換；可是後臺配置了圖標後；致使鼠標滑過圖標不能正常切換；因而就想到了濾鏡的效果來處理。因此順便學習了一下經常使用的濾鏡效果。

使用濾鏡：

前言

css3的濾鏡filter屬性，能夠對網頁中的圖片進行相似Photoshop圖片處理的效果，經過css對圖像進行處理。

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

經常使用屬性

使用語法：

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

CSS 濾鏡能夠給同個元素同時定義多個，例如 filter: contrast(150%) brightness(1.5) ，可是濾鏡的前後順序不一樣產生的效果也是不同的；

默認值爲： initial

inherit 表示從父級繼承。

注意: 濾鏡一般使用百分比 (如：75%), 固然也可使用小數來表示 (如：0.75)。

normal 正常

未添加濾鏡

<div data-filter="image-normal">
	<h2>normal</h2>
	<img src="1.jpg">
</div>
複製代碼

grayscale 灰階

將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則徹底轉爲灰度圖像，值爲0%圖像無變化。若未設置，值默認是0。也能夠寫0-1之間的小數。

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

複製代碼

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

複製代碼

saturate 飽和度

值爲0時顯示黑白色，值爲0.5時飽和度爲原圖的一半，值爲1時，表示飽和度等於原圖，數值大於1表示飽和度增強。

//（值爲0-1之間的小數）
<div data-filter="image-saturate">
	<h2>saturate</h2>
	<img src="1.jpg">
</div>
複製代碼

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

[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">
	<h2>sepia</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

invert 反色

反轉輸入圖像。值定義轉換的比例。100%的價值是徹底反轉。值爲0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。

<div data-filter="image-invert">
	<h2>invert</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

opacity 透明度

圖像的透明程度。值爲0%則是徹底透明，值爲100%則圖像無變化。0-100%之間則是部分透明。也能夠用0-1之間的小數替代%。與已有的opacity屬性很類似，不一樣之處在於經過filter，一些瀏覽器爲了提高性能會提供硬件加速。

<div data-filter="image-opacity">
	<h2>opacity</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

brightness 亮度

使圖片更亮或更暗。若是值是0%，圖像會全黑。值是100%，則圖像無變化。值超過100%，圖像會比原來更亮。若是沒有設定值，默認是1。可使用百分比也可使用小數表示。

<div data-filter="image-brightness">
	<h2>brightness</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

contrast 對比度

調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。可使用百分比也可使用小數表示。 對比度是對畫面明暗程度的定義。對比度是指畫面黑白明暗的層次。

<div data-filter="image-contrast">
	<h2>contrast</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

hue-rotate 色相旋轉

給圖像應用色相旋轉。讓圖像中的顏色，在色相環中作對應的旋轉。值爲0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值至關於又繞一圈。

<div data-filter="image-hue-rotate">
	<h2>hue-rotate</h2>
	<img src="1.jpg">
</div>
複製代碼

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

複製代碼

blur 模糊

給圖像設置高斯模糊。值越大越模糊，默認是0，就是不模糊。

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

複製代碼

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

複製代碼

drop-shadow 陰影

與 box-shadow屬性很類似；不一樣之處在於，經過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速。

<div data-filter="drop-shadow">
	<h2>blur</h2>
	<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 */
}
複製代碼

對比box-shadow

添加陰影屬性。

<div data-filter="box-shadow">
	<h2>blur</h2>
	<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 仍是有區別的；效果上看 box-shadow 是給整個圖片加陰影，而 drop-shadow 只是給不透明的部分加陰影 。

multiple 多個濾鏡效果

<div data-filter="multiple-filter">
	<h2>blur</h2>
	<img src="1.jpg">
</div>
複製代碼

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

融合效果

/* blur 混合 contrast 產生融合效果 */
.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%)',//對比度
	hue-rotate: '(160deg)', //色相旋轉
	blur: '(2px)',//模糊  
	drop-shadow:'drop-shadow(16px 16px 20px blue)',//陰影
);

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

參考文章：

1. www.cnblogs.com/coco1s/p/75…
2. www.runoob.com/cssref/css3…
3. segmentfault.com/a/119000001…
4. www.sohu.com/a/120823635…
5. blog.csdn.net/weixin_4270…
6. www.freejs.net/demo/392/in…