css的過濾器的簡單學習

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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>

<!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>

<!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>

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

本文出自 “我的JAVA世界” 部落格，請務必保留此出處http://hanchaohan.blog.51cto.com/2996417/1291955

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More