溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3中強(qiáng)大filter屬性怎么用

發(fā)布時(shí)間：2021-08-03 10:24:39 來源：億速云 閱讀：151 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了CSS3中強(qiáng)大filter屬性怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、定義 　　

filter，從字面意思來看就是濾鏡，官方定義filter屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)；舉個(gè)栗子：

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">

CSS3中強(qiáng)大filter屬性怎么用CSS3中強(qiáng)大filter屬性怎么用　　　　

看到這個(gè)效果，博友們是不是都開始對filter開始感興趣了呢 ？

2、語法

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

可以看到，屬性有很多可選值，他們都是什么意思呢？　　　　

  1. grayscale灰度

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

  3. saturate飽和度

  4. hue-rotate色相旋轉(zhuǎn)

  5. invert反色

  6. opacity透明度

  7. brightness亮度

  8. contrast對比度

  9. blur模糊

  10. drop-shadow陰影

舉個(gè)栗子:

這里用sepia調(diào)整

 <head>
     <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  </head>
 <body>
 <img src="img/boke.png" alt="">
 <img class="img" src="img/boke.png" alt="">
 </body>

示例圖片：

CSS3中強(qiáng)大filter屬性怎么用 

3、示例 　　

下面，對filter屬性的其中幾個(gè)值做一個(gè)示例，其他好玩的東西需要博友們一起發(fā)掘，有啥好玩的可以跟我一起分享喲

(1)hue-rotate(色彩旋轉(zhuǎn))

效果看圖吧，具體使用效果要靠大家發(fā)掘：

 <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  </head>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

效果圖：

CSS3中強(qiáng)大filter屬性怎么用 

(2)blur(模糊)

blur（模糊效果，單位px）　　　　

 <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

示例圖片：

CSS3中強(qiáng)大filter屬性怎么用 

(3)invert反色

invert反色會(huì)吧圖片變成底片的感覺，多說無益，看代碼：

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>

示例圖片：

CSS3中強(qiáng)大filter屬性怎么用

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中強(qiáng)大filter屬性怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手