css的過濾器的簡單學習

技術小胖子發表於2017-11-07
原文網址 : https://flycode.co/archives/130406
CSS過濾器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>濾鏡學習1</title>
    <style type="text/css">
    /**
     * 1、Alpha 濾鏡
        語法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
        starty=starty,finishx=finishx,finishy=finishy)}
        `Alpha`屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說
        就是一個元素的透明度。通過指定座標，可以指定點、線、面的透明度。他們的引數含義分別如下：
                                
        “opacity`代表透明度水準。預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，
        100代表完全不透明。”finishopacity`是一個可選引數，如果想要設定漸變的透明效果，就可以使用他們來指定
        結束時的透明度。範圍也是0 到 100。“style` 引數指定了透明區域的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀
        、3代表長方形。”STARTX“和”STARTY“代表漸變透明效果的開始X和Y座標。”
        FINISHX“和”FINISHY“代表漸變透明效果結束X和Y 的座標
     */
        body{
            /*貌似只有IE瀏覽器支援啊*/
            filter:gray;/*圖片變成灰色,可以取值為：{filter:gray} ,{filter:invert},{filter:xray} */
            /*filter:alpha(opacity=50,finishopacity=80,style=2);*/
        }
    </style>
</head>
<body>
    <div class="try">
        <font color="#cc33c2">濾鏡的學習開始</font>
    </div>
    <div>
        <img src="l5.jpg" alt="" width="350">
    </div>
                           
</body>
</html>


2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>濾鏡學習2</title>
    <style type="text/css">
        /**
         * 2、Blur 濾鏡
            語法：對於HTML：{filter:blur(add=add,direction=direction,strength=strength)}
            對於Script語言： [oblurfilter=] object.filters.blur
            用手指在一幅尚未乾透的油畫上迅速劃過時，畫面就會變得模糊。”Blur`就是產生同樣的模糊效果。
            “ADD”引數是一個布林判斷“TRUE（預設）”或者“FALSE”。它指定圖片是否被改變成印象派的模糊
            效果。模糊效果是按順時針的方向進行的，“DIRECTION”引數用來設定模糊的方向。其中0度代表垂直
            向上，然後每45度為一個單位。它的預設值是向左的270度。“STRENGTH“值只能使用整數來指定，
            她代表有多少畫素的寬度將受到模糊影響。預設是5個。
         */
        body{
            filter:blur(add=true,direction=120,strength=20);
        }
    </style>
</head>
<body>
    <div class="try">
        <font color="#cc33c2">濾鏡的學習開始</font>
    </div>
    <div>
        <img src="l5.jpg" alt="" width="350">
    </div>
                       
</body>
</html>


3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>濾鏡學習3</title>
    <style type="text/css">
        /**
            3、
            語法：{filter:chroma(color=color)}
            使用”Chroma`屬性可以設定一個物件中指定的顏色為透明色，引數COLOR即要透明的顏色。
         */
        body{
            filter:chroma(color=#cc33c2);
        }
    </style>
</head>
<body>
    <div class="try">
        <font color="#cc33c2">濾鏡的學習開始</font>
    </div>
    <div>
        <img src="l5.jpg" alt="" width="350">
    </div>
                   
</body>
</html>


這個東西，貌似用的不是很多啊。而且瀏覽器相容性不好。你可以去網上參考更多的資料。謝謝

     本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/1291955，如需轉載請自行聯絡原作者


相關文章