Invert屬性可以把對象的可視化屬性全部翻轉,包括色彩、飽和度和亮度值。
它的表達式也很簡單:
Filter:Invert
我們再來看一下加上Invert屬性前後的圖片效果變化(如下圖):
原圖 Invert屬性效果圖
我們看到Invert屬性實際上達到的是一種“底片”的效果。
自己拿別的圖來試試吧。
Glow屬性
當對一個對象使用“Glow”屬性後,這個對象的邊緣就會產生類似發光的效果。它的表達式如下:
Filter:Glow(Color=color,Strength=strength)
Glow屬性的參數只有兩個:Color是指定發光的顏色,Strength指定發光的強度,參數值從1到255。 讓我們先來看一下加上Glow屬性的效果圖:
怎麼樣,是不是有一種燃燒的火焰的感覺。實現這種效果的代碼如下:
<Html>
<head>
<title>filter glow</title>
<style>//*開始設置CSS樣式*//
<!--
.leaf{position:absolute; top:20; width:400;
filter:glow(color=#FF3399,strength=15);}
file://*設置類leaf,絕對定位,Glow濾鏡屬性,發光顏色值為#FF3399,強度為
15*//
.weny{position:absolute; top:70; left:50; width:300;
filter:glow(color=#9966CC,strength=10);}
file://*設置類weny,絕對定位,glow濾鏡屬性,發光顏色值為#9966CC,強度為
15*//
-->
</style>
</head>
<body>
<div class=“leaf”>//*leaf類樣式*//
<p style=“font-family:lucida handwriting;
font-size:54pt;font-weight:bold;color:#003366;”>
Leaf Mylove</p>//*設置字體名稱、大小、粗細、顏色*//
</div>
<div class=“weny”>//*weny類樣式*//
<p style=“font-family:bailey; font-size:48pt;
font-weight:bold;color:#99CC66;”>
file://設置字體名稱、大小、粗細、顏色*//
Weny Good!</p>
</div>
</body>
</Html>
您還可以隨意修改顏色值,看看其他的發光效果是怎樣的。
FlipH、FlipV屬性
Flip是CSS濾鏡的翻轉屬性,FlipH代表水平翻轉,FlipV代表垂直翻轉。它們的表達式很簡單,分別是:
Filter:FlipH
Filter:FlipV
我們先來看一幅圖:
下面我們分別對它實現水平翻轉和垂直翻轉,並且在圖片上方的一段文字,也發生翻轉。代碼如下:
<Html>
<head>
<title>flip CSS</title>
<style>//*設置CSS樣式開始*//
<!--
div{position:absolute;top:20;width:300;
filter:fliph(flipv);}
file://*定義DIV范圍內的樣式,絕對定位,翻轉為水平翻轉或垂直翻轉。
注意:在這裡fliph和flipv只取其中的一個*//
img{position:absolute;top:70;left:40;
filter:fliph(flipv);}
file://*定義圖片的樣式,絕對定位,翻轉屬性和DIV一樣。*//
-->
</style>
</head>
<body>
<div>
<p style=“font-family:bailey;font-size:36pt;
font-weight:bold; color:rgb(10,128,156);”>
Leaf Village </p>
file://*定義字體名稱、大小、粗細、顏色*//
</div>
<p><img src=“ss05058.jpg”></p>
file://*導入一張圖片*//
</body>
</Html>
代碼產生的兩個效果分別如下圖:
水平翻轉 垂直翻轉
翻轉的屬性應用是不是很簡單。