简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  一起看看CSS filter中的那些神奇用途

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

青灯夜游
青灯夜游轉載
2021-05-28 10:59:361822瀏覽

這篇文章帶大家了解CS​​S 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" src="futurama.png" / alt="一起看看CSS filter中的那些神奇用途" >
<img  class="drop-shadow" 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 class="title">FUTURAMA</h1>
  <img  class="img"    style="max-width:90%" src="./images/futurama.png" / 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中的那些神奇用途

一起看看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

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

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

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

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

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

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




  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  

    
    
  

  




  一起看看CSS 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 都可以在實踐中得到很好的應用。 


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


    

  • 毛玻璃效果https://codepen.io/KazuyoshiGoto/pen/nhstF
    • 

  • #破碎玻璃效果https://codepen.io/bajjy/pen/vwrKk
    • 

  • 使用filter實現的hover效果https://codepen.io/nxworld/details/ZYNOBZ
    • 

  • 反色按鈕https://codepen.io/monkey-company/pen/zZZvRp
    • 

  • 老照片https://codepen.io/dudleystorey/pen/pKoqa
    • 

  • #進階版filter編輯器：https://codepen.io/stoumann/pen/MWeNmyb
    • 



最後附上一張用上面濾鏡編輯器調出來的復古莫蘭迪色性冷淡油畫效果 濾鏡圖片。 （哇塞，這也太哇塞了吧，CSS 絕絕子yyds）


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




原文網址：https ://segmentfault.com/a/1190000040058430


作者：dragonir


##更多程式相關知識，請造訪：
程式入門！ ！ 
以上是一起看看CSS filter中的那些神奇用途的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：深入了解CSS和網路效能下一篇：深入了解CSS和網路效能
相關文章
看更多