目錄
背景
用法範例
應用案例
更聰明的陰影效果
元素、網頁置灰
FUTURAMA
元素强调、高亮
毛玻璃效果
艺术照!甚至可以实现简易版 insatagram
节省空间,提高网页加载速度
兼容性
總結
首頁 web前端 css教學 一起看看CSS filter中的那些神奇用途

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

May 28, 2021 am 10:59 AM
css3 filter 前端

這篇文章帶大家了解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 和 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-shadowfilter: drop-shadow 為透明元素添加陰影的對比:

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

<img  class="box-shadow lazy"  src="/static/imghw/default1.png"  data-src="futurama.png"    / alt="一起看看CSS filter中的那些神奇用途" >
<img  class="drop-shadow lazy"  src="/static/imghw/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 標籤下有 h1img 標籤,未新增 filter 樣式前如下圖所示。

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

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

現在我們為body 元素添加一個.gray 類,<body class="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 效果,来强调鼠标当前悬浮或选中的内容。下面是对一组按钮菜单栏添加 brightnesssaturate 两个方法,通过改变亮度和饱和度来高亮元素。

一起看看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: blurbackdrop-filter: blur两种方法实现这种效果的总结。

有两个含有相同类名 glassp 元素,它们分别被添加两个类 glass-by-filterglass-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 滤镜作用在该元素上。

<form id="imageEditor">
  <p>
    <label for="gs">Grayscale</label>
    <input id="gs" name="gs" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="blur">Blur</label>
    <input id="blur" name="blur" type="range" min="0" max="10" value="0">
  </p>
  <p>
    <label for="br">Exposure</label>
    <input id="br" name="br" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="ct">Contrast</label>
    <input id="ct" name="ct" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="huer">Hue Rotate</label>
    <input id="huer" name="huer" type="range" min="0" max="360" value="0">
  </p>
  <p>
    <label for="opacity">Opacity</label>
    <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
  </p>
  <p>
    <label for="invert">Invert</label>
    <input id="invert" name="invert" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="saturate">Saturate</label>
    <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
  </p>
  <p>
    <label for="sepia">Sepia</label>
    <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
  </p>
  <input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
<div id="imageContainer" class="center">
  <img  src="/static/imghw/default1.png"  data-src="futurama.png"  class="lazy"   alt="一起看看CSS filter中的那些神奇用途" >
</div>
登入後複製
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", &#39;grayscale(&#39; + gs+
    &#39;%) blur(&#39; + blur +
    &#39;px) brightness(&#39; + br +
    &#39;%) contrast(&#39; + ct +
    &#39;%) hue-rotate(&#39; + huer +
    &#39;deg) opacity(&#39; + opacity +
    &#39;%) invert(&#39; + invert +
    &#39;%) saturate(&#39; + saturate +
    &#39;%) sepia(&#39; + sepia + &#39;%)&#39;
  );
  $("#imageContainer img").css(
    "-webkit-filter", &#39;grayscale(&#39; + gs+
    &#39;%) blur(&#39; + blur +
    &#39;px) brightness(&#39; + br +
    &#39;%) contrast(&#39; + ct +
    &#39;%) hue-rotate(&#39; + huer +
    &#39;deg) opacity(&#39; + opacity +
    &#39;%) invert(&#39; + invert +
    &#39;%) saturate(&#39; + saturate +
    &#39;%) sepia(&#39; + sepia + &#39;%)&#39;
  );
}
// 当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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

一文聊聊Node中的記憶體控制 一文聊聊Node中的記憶體控制 Apr 26, 2023 pm 05:37 PM

基於無阻塞、事件驅動建立的Node服務,具有記憶體消耗低的優點,非常適合處理海量的網路請求。在海量請求的前提下,就需要考慮「記憶體控制」的相關問題了。 1. V8的垃圾回收機制與記憶體限制 Js由垃圾回收機

PHP與Vue:完美搭檔的前端開發利器 PHP與Vue:完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

PHP與Vue:完美搭檔的前端開發利器在當今網路快速發展的時代,前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高,前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術,搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合,以及詳細的程式碼範例,幫助讀者更好地理解和應用這兩

前端面試官常問的問題 前端面試官常問的問題 Mar 19, 2024 pm 02:24 PM

在前端開發面試中,常見問題涵蓋廣泛,包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此,應試者應充分準備這些方面,以展現自己的能力和專業知識。

如何使用 Go 語言進行前端開發? 如何使用 Go 語言進行前端開發? Jun 10, 2023 pm 05:00 PM

隨著網路技術的發展,前端開發變得日益重要。尤其是行動端設備的普及,更需要高效率、穩定、安全又易於維護的前端開發技術。而作為一門快速發展的程式語言,Go語言已經被越來越多的開發者所使用。那麼,使用Go語言進行前端開發行得通嗎?接下來,本文將為你詳細說明如何使用Go語言進行前端開發。先來看看為什麼要使用Go語言進行前端開發。很多人認為Go語言是一門

C#開發經驗分享:前端與後端協同開發技巧 C#開發經驗分享:前端與後端協同開發技巧 Nov 23, 2023 am 10:13 AM

身為C#開發者,我們的開發工作通常包括前端和後端的開發,而隨著技術的發展和專案的複雜性提高,前端與後端協同開發也變得越來越重要和複雜。本文將分享一些前端與後端協同開發的技巧,以幫助C#開發者更有效率地完成開發工作。確定好介面規範前後端的協同開發離不開API介面的交互。要確保前後端協同開發順利進行,最重要的是定義好介面規格。接口規範涉及到接口的命

Django是前端還是後端?一探究竟! Django是前端還是後端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一個由Python編寫的web應用框架,它強調快速開發和乾淨方法。儘管Django是web框架,但要回答Django是前端還是後端這個問題,需要深入理解前後端的概念。前端是指使用者直接和互動的介面,後端是指伺服器端的程序,他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下,前後端程式可以獨立開發,分別實現業務邏輯和互動效果,資料的交

Go語言前端技術探秘:前端開發新視野 Go語言前端技術探秘:前端開發新視野 Mar 28, 2024 pm 01:06 PM

Go語言作為一種快速、高效的程式語言,在後端開發領域廣受歡迎。然而,很少有人將Go語言與前端開發聯繫起來。事實上,使用Go語言進行前端開發不僅可以提高效率,還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性,並提供具體的程式碼範例,幫助讀者更了解這一領域。在傳統的前端開發中,通常會使用JavaScript、HTML和CSS來建立使用者介面

golang可以做前端嗎 golang可以做前端嗎 Jun 06, 2023 am 09:19 AM

golang可以做前端,Golang是一種通用性很強的程式語言,可以用於開發不同類型的應用程序,包括前端應用程序,透過使用Golang來編寫前端,可以擺脫JavaScript等語言引起的一系列問題,例如類型安全性差、效能低下,以及程式碼難以維護等問題。

See all articles