css3中強大的filter(濾鏡)屬性

時間 2019-12-08

標籤 css3 css 強大 filter 屬性欄目 CSS 简体版

原文原文鏈接

CSS3中強大的filter(濾鏡)屬性web

　　　　博主最近在作網站的過程當中發現了一個很是強大的CSS3屬性，就是filter(濾鏡)屬性，喜歡p圖的朋友看名字都應該知道這是什麼神器了吧。固然，這個屬性的效果確定不能跟ps相比，可是利用的好的話能夠在節約不少空間下，把一張圖作成兩張圖的效果。網站

1定義　　url

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

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

　　　　看到這個效果，博友們是否是都開始對filter開始感興趣了呢？

2語法3d

　　　　filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
　　　　能夠看到，屬性有不少可選值，他們都是什麼意思呢？

1　　grayscale灰度code

2　　sepia褐色（有種復古的舊照片感受）orm

3　　saturate飽和度blog

4　　hue-rotate色相旋轉圖片

5　　invert反色ci

6　　opacity透明度

7　　brightness亮度

8　　contrast對比度

9　　blur模糊

　　　0　　drop-shadow陰影

　　　　舉個栗子:

　　　　這裏用sepia調整

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .img{

 6             -webkit-filter:sepia(70%);
 7         } 
 8     </style>
 9 </head>
10 <body>
11 <img src="img/boke.png" alt="">
12 <img class="img" src="img/boke.png" alt="">
13 </body>

示例圖片：

3示例　　

　　　　下面，對filter屬性的其中幾個值作一個示例，其餘好玩的東西須要博友們一塊兒發掘，有啥好玩的能夠跟我一塊兒分享喲

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

　　　　　　　效果看圖吧，具體使用效果要靠你們發掘：

 1    <style>
 2         .img{
 3             -webkit-filter:hue-rotate(330deg);
 4         }
 5     </style>
 6 </head>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </body>

　　　　　　效果圖：

(2) blur(模糊)

blur（模糊效果，單位px）　　　　

 1    <style>
 2         .img{
 3             -webkit-filter:blur(1px);
 4         }
 5     </style>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </body>

　　　　　　示例圖片：

(3) invert反色

　　　　invert反色會吧圖片變成底片的感受，多說無益，看代碼：

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

　　　　示例圖片：

　　　　好了，今天的分享就到這裏了，謝謝你們的觀看，其它的效果博主就不一一舉例了，若是感興趣請你們一一探索，也能夠跟博主來交流，有什麼好的意見建議請給博主留言，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。