執行個體詳解CSS濾鏡(3)Blur屬性

最後更新：2017-02-28 來源：互聯網

上載者：User

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

css|濾鏡|詳解

　　假如您用手在一幅還沒幹透的油畫上迅速划過，畫面就會變得模糊。CSS下的blur屬性就會達到這種模糊的效果。
　　先來看一下blur屬性的運算式：

　　filter：blur（add=add，direction，strength=strength）

　　我們看到blur屬性有三個參數：add、direction、strength。
　　Add參數有兩個參數值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數用來設定模糊的方向。模糊效果是按照順時針方向進行的。其中0度代表垂直向上，每45度一個單位，預設值是向左的270度。角度方向的對應關係見下表：

　　Strength參數值只能使用整數來指定，它代表有多少像素的寬度將受到模糊影響。預設值是5像素。
　　還是看一個例子吧。

<html> <head> <title>blur css</title> <script> function handlechange(obj) { with(obj.filters(0)) { if (strength<255) { strength +=2; direction +=45; } } } </script> </head> <body> <p><img id ="img1" src="/UploadPic/2007-7/200777211513115.jpg" style="filter:blur(strength=1)" onfilterchange="handlechange(this)"> </p> </body></html>

[Ctrl+A 全選,提示:你可修改代碼後運行]

　　看起來是不是有些像萬花筒，在這個例子中加入了一些JavaScript的語句，代碼如下：

　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*設定一個迴圈函數handlechange，對象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter屬性*//
　　　 { if (strength<255)//*設定迴圈條件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每迴圈一次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=http://www.webjx.com/htmldata/2005-05-04/“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*匯入一幅圖片，初始blur屬性strength等於1，同時調用onfilterchange函
　　　數*//
　　　</p>
　　　 </body>
　　</html>

　　註：在javascript中blur屬性是這樣定義的：
　　　　[oBlurfilter=] object.Filters.blur

　　這個例子是Blur屬性的一個比較複雜的例子，下一節我將向您介紹兩個較簡單的blur屬性效果。

通過blur屬性還可以設定頁面中的字型。如果把字型的blur屬性add參數值定義為1，得出來的字型效果是這樣的（如下圖）：

　　怎麼樣，是不是有些印象派的意思，這種效果的實現代碼如下：

<html>
　　　<head>
　　　<title>filter blur</title>
　　　<style>//*CSS樣式定義開始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div style=“width:702； height: 288”>
　　　<p style=“font-family:lucida handwirting italic；
　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” >
　　　 LEAF</p>
　　　//*定義字型名稱、大小、樣式、前景色彩*//
　　　</div>
　　　</body>
　　</html>

　　我們看到strength設定為25，如果把其值再改大一些，就會達到非常誇張的效果，同時把Direction參數值為180，顯示效果如下圖：

　　用blur屬性設定字型可以達到很多效果，把direction和strength再做修改，還能達到多種效果，您可以自己修改試一試。

本文章原先以中文撰寫並發佈於 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