精通 CSS 濾鏡(三)

2021-04-01 09:30:50 字數 1701 閱讀 1663

精通 css 濾鏡(三)

**:動態網製作指南 .knowsky.***

1、alpha 濾鏡

語法:"alpha"屬性是把乙個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種「與背景混合」通俗地說就是乙個元素的透明度。通過指定座標,可以指定點、線、面的透明度。他們的引數含義分別如下:

「opacity"代表透明度水準。預設的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。」finishopacity"是乙個可選引數,如果想要設定漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。「style" 引數指定了透明區域的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。」startx「和」starty「代表漸變透明效果的開始x和y座標。」finishx「和」finishy「代表漸變透明效果結束x和y 的座標。

效果如下:

2、blur 濾鏡

語法:對於html:

對於script語言: [oblurfilter=] object.filters.blur

用手指在一幅尚未乾透的油畫上迅速劃過時,畫面就會變得模糊。」blur"就是產生同樣的模糊效果。

「add」引數是乙個布林判斷「true(預設)」或者「false」。它指定是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的,「direction」引數用來設定模糊的方向。其中0度代表垂直向上,然後每45度為乙個單位。它的預設值是向左的270度。「strength「值只能使用整數來指定,她代表有多少畫素的寬度將受到模糊影響。預設是5個。對於網頁上的字型,如果設定他的模糊」add=1「,那麼這些字型的效果會非常好看的。如下:

filter:blur(add=ture,direction=135,strength=10)

我向你飛,雨溫柔地綴!

3、fliph, flipv 濾鏡

語法: , 分別是水平反轉和垂直反轉,具體如下:

4、chroma 濾鏡

語法:使用」chroma"屬性可以設定乙個物件中指定的顏色為透明色,引數color即要透明的顏色。下面是蘭色文字,然後用chroma 濾鏡過濾掉蘭色,就成了下面的樣子。

filter:chroma(color=blue)

滴水簷坊

5、dropshadow 濾鏡

語法:「dropshaow"顧名思義就是新增物件的陰影效果。其工作原理是建立乙個偏移量,加上較深。"color"代表投射陰影的顏色,"offx"和"offy"分別是x方向和y方向陰影的餓偏移量。"positive"引數是乙個布林值,如果為「true(非0)」,那麼就為任何的非透明畫素建立可見的投影。如果為「fasle(0)」,那麼就為透明的畫素部分建立透明效果

正常文字

dropshadow(color=gray,offx=5,offy=5.positive=0)後的文字

6、glow 濾鏡

語法:當對乙個物件使用"glow"屬性後,這個物件的邊緣就會產生類似發光的效果。「color」是指定發光的顏色,「strength」則是強度的表現,可以從1到255之間的任何整數來指定這個力度。

filter:glow(color=red,strength=10) 後的效果

滴水簷茶坊

filter:glow(color=#ffff00,strength=5) 後的效果

滴水簷茶坊

好象可以把photoshop踹到一邊了,是嗎

CSS色調旋轉濾鏡

首先看一下官方對於css的filter屬性的定義 css屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整影象,背景和邊框的渲染。本文主要講的是filter中的乙個屬性 hue rotate。官方定義是 給影象應用色相旋轉。angle 一值設定影象會被調整的色環角度值。值為0deg,則影象無...

CSS 避免使用濾鏡

這個濾鏡的問題在於瀏覽器載入時它會終止內容的呈現並且凍結瀏覽器。在每乙個元素 不僅僅是 它都會運算一次,增加了記憶體開支,因此它的問題是多方面的。ie獨有屬性alphai程式設計客棧mageloader用於修正7.0以下版本中顯示png的半透明效果。這個濾鏡的問題在於瀏覽器載入時它會終止內容的呈現並...

《精通css》筆記

1.要知道常用選擇器 id選擇器,類選擇器,型別選擇器,後代選擇器,偽類選擇器 文件結構之外 通用選擇器 高階選擇器 子選擇器,相鄰同胞選擇器,屬性選擇器 2.選擇器特殊性分級 3.層疊和繼承的區別 4.設計 的結構,使用風格統一的大注釋塊分割每個部分 一般性樣式 輔助樣式 頁面結構 頁面組建 覆蓋...