CSS filter 屬性

来源:https://www.cnblogs.com/gaoguowen/archive/2019/06/21/11065493.html
-Advertisement-
Play Games

filter 將模糊或者顏色偏移等圖像效果用於元素,通常用於調整圖像,背景和邊框的渲染 css 標準中已內置一些預定義效果的函數,也可通過url使用 "SVG濾鏡" 語法 濾鏡屬性 需要設定某一函數的值。如果該值無效,函數返回“none“。 url() url 函數接收一個XML文件,該文件是一個 ...


filter

  • 將模糊或者顏色偏移等圖像效果用於元素,通常用於調整圖像,背景和邊框的渲染
  • css 標準中已內置一些預定義效果的函數,也可通過url使用SVG濾鏡

語法

/* URL to SVG filter */
filter: url(filter.svg#id);

/* <filter-function> values */
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%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

濾鏡屬性

  • 需要設定某一函數的值。如果該值無效,函數返回“none“。

url()

  • url 函數接收一個XML文件,該文件是一個SVG filter,並且包含一個ID值 來指定哪一個濾鏡
filter:url(resources.svg#c1) 

blur()

  • 定義模糊度
  • 可以接受css長度單位,不接受百分比
filter:blur(5px)

brightness()

  • 定義亮度
  • 預設為1, 1-0 逐漸變暗,1以上逐漸變亮
  • 可以是百分比, 不能為負數

contrast()

  • 定義對比度
  • 1-0 逐漸變成灰黑 1以上顏色逐漸變艷麗
  • 可以是百分比, 不能為負數

drop-shadow()

  • 定義陰影效果,合成在圖像下麵,
  • 參數 和 shadow, box-shadow 相似
  • shadow, box-shadow屬性不同之處在於通過filter,一些瀏覽器為了提升性能會提供硬體加速。
    傳參順序從左至右:
    1. 水平偏移距離正值右偏,負值左偏(offset-x)。
    2. 垂直偏移距離正值向下偏,負值上偏(offset-y)。
    3. 一個length值(表示距離尺寸的一種css數據格式) 值越大,越模糊陰影會變得更大更淡.) 預設為0 (blur-radius)
    4. 一個length值,正值會使陰影擴張和變大,負值會是陰影縮小,預設 0
    5. color 色值,在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 會應用color 屬性的值,顏色值省略,WebKit中陰影是透明的。
filter:drop-shadow(16px 16px 10px black)

grayscale()

  • 定義灰度
  • 取值0 - 1的數值之間,可設置百分比,不可為負數
filter:grayscale(50%);

hue-rotate()

  • 定義顏色,色相旋轉調整
  • 單位 deg
  • 可為負值
filter: hue-rotate(90deg)

invert()

  • 反向輸入圖,定義轉換比例
  • 預設0 0%和100%之間,則是效果的線性乘子。
filter: invert(100%)

opacity()

  • 轉化圖像的透明程度
  • 類似於css的opacity屬性
  • 1-0 逐漸變透明,支持百分比 ,不能為負數
  • 和opacity屬性不同之處在於通過filter,一些瀏覽器為了提升性能會提供硬體加速。
filter: opacity(50%)

saturate()

  • 定義圖像飽和度
  • 1-0 至完全不包和,1為正常, 1以上飽和度更高,更艷麗,支持百分比
filter:saturate(369%)

sepia()

  • 定義深褐色的色度
  • 0 - 1 逐漸變為深褐色 支持百分比,不支持負數
filter: sepia(100%)

組合函數

  • 可以將任意數量的函數一起控制渲染,其中有一個不符合規範將全部失效
filter:sepia(100%) saturate(369%) opacity(50%)

相容性


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • es6-變數的解構賦值 ...
  • [2019.06.21 學習筆記3] 1.<p>段落標簽 2.多用於文章、長篇文字,沒有內容字數限制 ...
  • [2019.06.21 學習筆記2] 1.標題標簽 2.<h1>到<h6>的字體是從大到小,都是加粗,沒有<h7> 3.如果要重定義<h>標簽的樣式,修改css樣式中的font-weight(字體粗細)、font-size(字體大小) ...
  • [2019.06.21 學習筆記1] 1.<a>定義超鏈接 2.必須屬性href,鏈接位置,對應一個url地址,href="url地址",顯示藍色並帶有下劃線(可去掉),必須寫(不寫也可以,但是最好寫) 不想指向任何頁面:href="#" <!-- 指向當前頁面最頂部,點擊後不會發生跳轉--> 指向 ...
  • highchart圖表的一個常見問題是不能複製文字 比如官網的某個圖表例子,文字不能選擇,也無法複製,有時產品會抓狂... 本文給出一個簡單的方案,包括一些解決的思路,希望能幫助到有需要的人 初期想了蠻久也搜了蠻多,沒搜到,找到的結論是圖表使用的是svg實現,必然無法選擇文字,似乎是個死問題,已經瀕 ...
  • 實現代碼如下: 一、Html代碼 二、jQuery代碼 ...
  • 註: ** 先來說下前端為什麼需要學習webpack吧!** 因為現在SPA流行,javascript的依賴包,less,scss.sass樣式文件的編譯。 更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。 說實話,現在不會一點webpac ...
  • 1.移動端視口問題 視口是指瀏覽器的可視區域,移動端的視口到底是多寬呢? 現在市面上的大部分手機,比如iphone X,它的預設視口寬度為980px,而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎?一個寬度只有375像素的手機,卻能夠顯示寬度為980像素的網頁,自然而然,網頁會被縮小 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...