搜尋
首頁web前端css教學詳解CSS3的filter濾鏡屬性

詳解CSS3的filter濾鏡屬性

Dec 19, 2017 am 10:38 AM
css3filter

最近發現了一個非常強大的CSS3屬性,就是filter(濾鏡)屬性,喜歡p圖的朋友看名字都應該知道這是什麼神器了吧。當然,這個屬性的效果絕對不能跟ps相比,但利用的好的話可以在節約很多空間下,把一張圖做成兩張圖的效果。本文主要介紹了詳解CSS3中強大的filter(濾鏡)屬性的相關資料,需要的朋友可以參考下,希望能幫助到大家。

1、定義

filter,從字面意思來看就是濾鏡,官方定義filter屬性定義了元素(通常是詳解CSS3的filter濾鏡屬性)的可視效果(例如:模糊與飽和度);舉個栗子:

<style>
    img{
      /*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="詳解CSS3的filter濾鏡屬性" >

    

看到這個效果,博友們是不是都開始對filter開始感興趣了呢?

2、語法

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

#可以看到,屬性有很多可選值,他們都是什麼意思呢?

  1. grayscale灰階

  2. sepia褐色(有種復古的舊照片感覺)

  3. saturate飽和度

  4. hue-rotate色相旋轉

  5. invert反色

  6. opacity透明度

  7. brightness亮度

  8. contrast對比

  9. blur模糊

  10. drop-shadow陰影

舉個栗子:

#這裡用sepia調整

 
     <meta>
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  
 
 <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="詳解CSS3的filter濾鏡屬性" >
 <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="詳解CSS3的filter濾鏡屬性" >
 

範例圖片:

3、範例

下面,對filter屬性的其中幾個值做一個範例,其他好玩的東西需要博友們一起發掘,有啥好玩的可以跟我一起分享喲

(1)hue-rotate(色彩旋轉)

效果看圖吧,具體使用效果要靠大家發掘:

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="詳解CSS3的filter濾鏡屬性" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="詳解CSS3的filter濾鏡屬性" >
 

效果圖:

 

(2)blur(模糊)

blur(模糊效果,單位px)    

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="詳解CSS3的filter濾鏡屬性" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="詳解CSS3的filter濾鏡屬性" >
 

範例圖片:

(3)invert反色

invert反色會吧圖片變成底片的感覺,多說無益,看程式碼:

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>

<img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="詳解CSS3的filter濾鏡屬性" >
<img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="詳解CSS3的filter濾鏡屬性" >

範例圖:

大家覺得好玩嗎?趕快動手嘗試。

相關建議:

css filter濾鏡的實例講解_html/css_WEB-ITnose

##關於filter濾鏡應用於圖片的兩種創意_經驗交流

CSS3的filter屬性詳細介紹

以上是詳解CSS3的filter濾鏡屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
每周平台新聞:改進慢速連接上的UX,用於編寫ALT文本的提示和HTML加載屬性的多填充每周平台新聞:改進慢速連接上的UX,用於編寫ALT文本的提示和HTML加載屬性的多填充Apr 17, 2025 am 11:09 AM

在本週的綜述中,如何確定慢速連接,我們應該在圖像中放入alt文本中的內容以及用於HTML加載屬性的新polyfill,

可重複使用的彈出式添加一點流行音樂可重複使用的彈出式添加一點流行音樂Apr 17, 2025 am 11:02 AM

彈出窗口是一種瞬態視圖,當用戶單擊控制按鈕或定義區域內時,屏幕上的內容頂部顯示在屏幕上。例如,

帶有真實下劃線的造型鏈接帶有真實下劃線的造型鏈接Apr 17, 2025 am 10:57 AM

在進入如何樣式下劃線之前,我們應該回答以下問題:我們應該強調嗎?

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow domApr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

帶有GraphQL的多人遊戲TIC TAC TOE帶有GraphQL的多人遊戲TIC TAC TOEApr 17, 2025 am 10:54 AM

GraphQL是API的查詢語言,對前端開發人員非常有能力。正如GraphQL網站所解釋的那樣,您可以描述您的數據,詢問什麼

使用CSS變量的邏輯操作使用CSS變量的邏輯操作Apr 17, 2025 am 10:44 AM

通常,在使用開關變量(一個0或1的變量時,這是在這篇文章中更詳細地解釋的概念),我希望我可以

懶負載嵌入YouTube視頻懶負載嵌入YouTube視頻Apr 17, 2025 am 10:40 AM

通過亞瑟·科倫贊(Arthur Corenzan),這是一個非常聰明的主意。與其使用默認的YouTube嵌入,該YouTube嵌入了,這會在用戶播放的情況下在頁面上添加大量資源

您可以在CSS中旋轉光標嗎?您可以在CSS中旋轉光標嗎?Apr 17, 2025 am 10:28 AM

kind!沒有簡單或標準的方法可以做到這一點,但是它可能是可能的。您可以使用CSS將光標更改為不同的內置本機版本

See all articles

熱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尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

記事本++7.3.1

記事本++7.3.1

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

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器