一起看看CSS filter中的那些神奇用途-css教學-PHP中文網

首頁

web前端

css教學

一起看看CSS filter中的那些神奇用途

青灯夜游

May 28, 2021 am 10:59 AM

css3filter前端

這篇文章帶大家了解CSS filter 有哪些神奇用途。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

一起看看CSS filter中的那些神奇用途

背景

#CSS filter屬性將模糊或顏色偏移等圖形效果應用於元素形成濾鏡，濾鏡通常用於調整影像，背景和邊框的渲染。它的值可以為 filter 函數 <filter-function></filter-function> 或使用 url 新增的svg濾鏡。

filter: <filter-function> [<filter-function>]* | none
filter: url(file.svg#filter-element-id)

<filter-function></filter-function> 可用 filter 和 backdrop-filter# 屬性。它的資料類型由下列篩選器函數之一指定。每個函數需要一個參數，如果參數無效，則濾鏡不會生效。以下是對濾鏡函數意義的解釋：

blur()：模糊影像
brightness() ：讓影像更明亮或更暗淡
contrast()：增加或減少影像的對比度
drop-shadow()：在影像後方應用投影
grayscale()：將影像轉為灰階圖
#hue-rotate()：改變影像的整體色調
invert()：反轉影像顏色
opacity()：改變影像透明度
saturate()：超飽和或去飽和輸入的圖像
sepia()：將圖像轉為棕褐色

用法範例

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

一起看看CSS filter中的那些神奇用途

應用案例

更聰明的陰影效果

在為元素添加陰影的時候，我們一般採用box-shadow 屬性，透過box-shadow(x偏移, y偏移, 模糊大小, 陰影大小, 色值, inset) 的語法形式很容易為元素添加陰影效果，但box-shadow 也有一個缺點，就是在為透明圖片添加陰影效果時，無法穿透元素，只能添加到透明圖片元素的盒模型上。這時候，filter 屬性的drop-shadow 方法就能很好的解決這個問題，用它添加的陰影可以穿透元素，而不是添加到元素的盒子模型邊框上。

drop-shadow 新增的陰影除了可以穿透透明元素外，陰影效果和box-shadow 是相同的，如果瀏覽器支援硬體加速的話，使用filter 新增的陰影效果會更加逼真。

drop-shadow 語法如下（它除了不支援設定inset，其他和box-shadow 是完全相同的）：

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

如：

filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));

下圖是分別使用box-shadow 和filter: drop-shadow 為透明元素添加陰影的對比：

一起看看CSS filter中的那些神奇用途

<img  class="box-shadow lazy" src="/static/imghwm/default1.png" data-src="futurama.png" alt="一起看看CSS filter中的那些神奇用途" >
<img  class="drop-shadow lazy" src="/static/imghwm/default1.png" data-src="futurama.png" alt="一起看看CSS filter中的那些神奇用途" >

.box-shadow {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
}
.drop-shadow {
  filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));
}

元素、網頁置灰

發生重大災害事故或其他哀悼日時，國企政府網站往往有網頁全部置灰的需求。或是很多網頁中有滑鼠 hover 懸浮到灰色元素上時變成彩色的樣式效果。此時就可以使用filter 屬性的grayscale 方法實現，它可以調整元素灰度，透過給頁面元素設定filter: grayscale(100%) 就可將頁面元素置灰。以下範例中，body 標籤下有 h1 和 img 標籤，未新增 filter 樣式前如下圖所示。

<body>
  <h1 id="FUTURAMA">FUTURAMA</h1>
  <img  class="img lazy"  src="/static/imghwm/default1.png"  data-src="./images/futurama.png"      style="max-width:90%"  / alt="一起看看CSS filter中的那些神奇用途" >
</body>

一起看看CSS filter中的那些神奇用途

現在我們為body 元素添加一個.gray 類，就可實現整個網頁置灰效果。

.gray {
  filter: grayscale(100%);
}

一起看看CSS filter中的那些神奇用途

為了相容 IE8 等其他低版本瀏覽器，我們可以加上瀏覽器前綴和 svg 濾鏡。

.gray {
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\&#39;http://www.w3.org/2000/svg\&#39;><filter id=\&#39;grayscale\&#39;><feColorMatrix type=\&#39;matrix\&#39; values=\&#39;0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\&#39;/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: grayscale(100%);
}

在做緊急置灰網頁需求時，上線一段時間往往需要撤掉這個功能，我們還可以在首次上線時添加以下類似的方法，來控制置灰效果的自動上線時間，這樣到達預定時間就可自動撤去，不用走兩次施工流程。

(function setGray() {
  var endTime = Date.parse("Apr 06 2077 00:00:01");
  var timestamp = Date.parse(new Date());
  if (timestamp <= endTime) {
    document.querySelector(&#39;html&#39;).classList.add(&#39;gray&#39;);
  }
})();

元素强调、高亮

brightness 方法实现元素高亮的效果，可以应用到菜单栏、图片列表 hover 效果，来强调鼠标当前悬浮或选中的内容。下面是对一组按钮菜单栏添加 brightness 和 saturate 两个方法，通过改变亮度和饱和度来高亮元素。

一起看看CSS filter中的那些神奇用途

.container {
  margin: 40px;
}
.button {
  padding: 0.5em 0.5em;
  background: #E0E0E0;
  border-radius: 3px;
}
.button.dark {
  background: #333;
}
.button:hover:not(.disabled) {
  cursor: pointer;
  border-radius: 3px;
  filter: brightness(110%) saturate(140%);
}
.button.disabled {
  filter: grayscale(100%);
}

毛玻璃效果

毛玻璃（Frosted glass）效果，顾名思义就是类似半透明毛玻璃的效果，在 iOS 系统、Windows 10 等系统 UI 中有广泛应用，使用毛玻璃效果可以增强视觉体验。在 《CSS揭秘》 等著作中也有系统讲解，下面是我对分别使用 filter: blur 和 backdrop-filter: blur两种方法实现这种效果的总结。

有两个含有相同类名 glass 的 p 元素，它们分别被添加两个类 glass-by-filter 和 glass-by-backdrop-filter 来区分两种方法。

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>

通用样式，设置毛玻璃元素的大小、圆角等基本样式：

.glass {
  height: 300px;
  width: 300px;
  border: 1px groove #EFEFEF;
  border-radius: 12px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

filter: blur 方法，给元素添加了一个 ::before 伪类设置 blur 方法并将其置于底层实现毛玻璃效果。

.glass-by-filter {
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}
.glass-by-filter::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: inherit;
  filter: blur(10px);
}

backdrop-filter: blur 直接在元素上添加 blur 方法实现毛玻璃效果。

.glass-by-backdrop-filter {
  backdrop-filter: blur(10px);
}

实现效果如下图所示（左：filter、右：backdrop-filter）：

一起看看CSS filter中的那些神奇用途

阅读扩展：毛玻璃边框效果：https://css-tricks.com/blurred-borders-in-css

艺术照！甚至可以实现简易版 `insatagram`

复古、版画、油画、漫画、液化、老照片、性冷淡、莫兰迪、赛博朋克、旺达幻视风格通通都可以实现！

通过结合使用 filter 的所有方法，可以搭配出任意自己想要的效果。以下是一个简单的 filter 方法调节器，可以调整每个方法的值，同时实时展示图片的滤镜效果。如下图所示。

一起看看CSS filter中的那些神奇用途

页面主要代码如下，控制区 #imageEditor 是一个 form 表单，表单每一行分别控制一种filter方法的值，展示区 #imageContainer 内部包含一个 img 元素，产生的 filter 滤镜作用在该元素上。

function editImage() {
  var gs = $("#gs").val();                // grayscale
  var blur = $("#blur").val();            // blur
  var br = $("#br").val();                // brightness
  var ct = $("#ct").val();                // contrast
  var huer = $("#huer").val();            // hue-rotate
  var opacity = $("#opacity").val();      // opacity
  var invert = $("#invert").val();        // invert
  var saturate = $("#saturate").val();    // saturate
  var sepia = $("#sepia").val();          // sepia
  $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
  $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}
// 当input值发生变化时即时应用滤镜
$("input[type=range]").change(editImage).mousemove(editImage);

现在只是实现了滤镜的实时预览，后续待实现功能包括支持复杂的 svg 滤镜模版、导出下载等，完成这些步骤，以后照片添加滤镜再也不用下载其他 APP了。实例完整版代码：https://codepen.io/dragonir/pen/abJmqxM

节省空间，提高网页加载速度

实践证明，同一图片减小亮度和对比度及色相饱和度之后的体积与原图相比，可以减小很大一部分体积空间 2M 左右的图片经过弱化后保存，就可以压缩到 1M 左右。在网页中我们可以使用经过 弱化 的图片，然后通过 CSS filter 将其还原。这样就可以达到压缩资源体积，提升网页加载速度、提高用户体验的目的。

具体操作可阅读以下教程：

对比度交换技术：使用 CSS filter 提高图像性能

https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters

兼容性

从 caniuse 查询结果可以看出，css filter 属性在现代浏览器中的支持性已经很好了，除了 IE 浏览器之外，其他浏览器中大多可以正常使用，必要时可添加浏览器内核前缀。但是官网也有以下3个issue 提示，相信后续随着浏览器的升级，这些问题也会被逐步修复：

在 Safari 瀏覽器中，如果子元素具有動畫效果，則不會被套用濾鏡。
目前沒有瀏覽器支援 drop-shadow 濾鏡的 spread-radius 方法。
在 Edge 瀏覽器中如果元素或子元素被設定了 負值z-index，則無法套用濾鏡。

一起看看CSS filter中的那些神奇用途

總結

這篇文章只是簡單列舉了幾款使用CSS filter 常用的頁面效果，其實filter 的每一種內建方法都可以有無限可能的擴充應用，如invert 反轉色同樣也可以應用到hover 效果上、調整網頁sepia 褐色值可以達到護眼效果等。只要發揮想像力和創造力，filter 都可以在實踐中得到很好的應用。

以下一些例子就是很好的應用，大家有興趣可以拓展閱讀學習：