CSS涓殑Filter鏍峰紡鐗规晥1

銆€銆€浠嶪E 4.0鐗堝紑濮嬶紝灏辨彁渚涗簡涓€浜涘唴缃殑澶氬獟浣撴护闀滅壒鏁堬紝姝ｆ槸鐢变簬杩欎簺鍩轰簬CSS鐨勬牱寮忓睘鎬х殑鎺у埗锛屼簬鏄垜浠湪缂栧啓缃戦〉鐨勬椂鍊欙紝鍗充娇鎴戜滑涓嶇敤鍥剧墖锛屼篃鍙互浣挎垜浠殑鏂囧瓧锛屽浘鐗囷紝鎸夐挳鎴栨槸DIV鏍囪瘑椴滆壋鏃犳瘮锛屽厖婊＄敓姘旓紝浠庤€屼负鑷繁鐨勭綉椤靛鍔犱簡姣旇緝缇庡鐨勮瑙夋晥鏋溿€?涓嬮潰锛屾垜浠氨鏉ョ湅鐪婥SS鐨凢ilter鏍峰紡銆傝繖閲岋紝鍗充娇浣犳病鏈塁SS杩欐柟闈㈢殑鐭ヨ瘑锛岀浉淇′互涓嬬殑鍐呭涔熶笉浼氬緢闅炬噦鐨勩€傚綋鐒讹紝棣栧厛锛屾垜榛樿浣犲凡缁忓杩嘓TML锛屽苟涓旇繕鑳藉仛缃戦〉锛屾渶濂芥槸杩樼煡閬撲竴鐐筍cripts璇彞銆傜敱浜庡悇绉嶆祻瑙堝櫒瀵笴SS鐨勬敮鎸佺殑鍘熷洜锛屾垜寤鸿浣犱娇鐢↖E4.0浠ヤ笂鐗堢殑娴忚鍣紝寮虹儓寤鸿浣犱娇鐢↖E5.0鐗堬紝杩欐牱锛屼綘灏变細姣笉璐瑰姏鍦扮湅鍒版墍鏈夌殑鐗规晥銆?
銆€銆€涓€銆佸缓绔婩ilter鏍峰紡

銆€銆€Filter鏃㈢劧鏄疌SS鏍峰紡琛ㄤ腑鐨勪竴鍛橈紝閭ｄ箞瀹冨氨鍙互鍍忓叾瀹冩牱寮忕殑瀹氫箟鍜屽簲鐢ㄦ柟寮忎竴鏍凤紝鍙兘鐩存帴瀹氫箟鍦ㄨ亴HTML鏍囪瘑鐨?lt;head>鍜?lt;/head>鍙棿銆傚叾璇硶缁撴瀯涓猴細

filter锛氬悕绉?鍙傛暟鍙婂叾鍊?

銆€渚嬪锛歩mgblur { filter : Blur( strength=30 ) }

銆€褰撶劧锛屽畠涔熷彲浠ラ€氳繃Style鏍囪瘑瀹氫箟鍦℉TML鐨勬爣璇嗛噷闈紝濡傦細

<Image ID=test SRC="test.gif" Style="Filter : Blur( Strength=30 )">

銆€銆€浠ヤ笂灏辨槸浣跨敤CSS涓璮ilter鏍峰紡鐨勪娇鐢ㄦ柟娉曪紝鍏跺疄杩欏拰鍏跺畠CSS鐨勬牱寮忓畾涔夋柟寮忎竴鏍凤紝鍒嗕负澶栭儴寮曠敤銆佸唴閮ㄥ紩鐢ㄥ拰灞€閮ㄥ紩鐢ㄤ笁绉嶏紝涓婇潰鐨勭涓€绉嶆槸鍐呴儴寮曠敤锛岀浜岀鏄眬閮ㄥ紩鐢紝澶栭儴寮曠敤鍒欒鍏堝缓绔嬩竴涓狢SS鐨勬枃浠讹紝鐒跺悗鐢?lt;link rel=StyleSheet type="text/css" href="鏍峰紡鏂囦欢鐨刄RL">鏉ュ祵鍏TML鏂囦欢銆傛湁鍏矯SS鐨勫畾涔夋柟寮忥紝璇峰ぇ瀹跺弬鑰冪綉椤甸櫠鍚ч噷鐨勭浉鍏虫枃绔犮€?

銆€銆€Filter鏍峰紡灞炴€у厑璁镐竴娆¤瀹氬涓护闀滄晥鏋滐紝涔熷氨鏄锛屽彲浠ヨ涓€涓狧TML鐨勫厓浠跺悓鏃舵嫢鏈夊涓护闀滅殑鐨勬晥鏋溿€備緥濡傦細
鈥︹€?鈥︹€?
銆€銆€銆€銆€銆€銆€<img id=image1 src="test.jpg" border="0">
銆€銆€銆€銆€銆€銆€<img id=image2 src="test.jpg" border="0" style="filter : blur ( Strength=30 ) flipv()">
鈥︹€?鈥︹€?

銆€銆€鍦ㄤ互涓婄殑渚嬪瓙涓紝ID涓篿mage1鐨勫浘鐗囨槸姝ｅ父鏄剧ず鐨勫浘鐗囷紝鑰孖D涓篿mage2鐨勫浘鐗囧垯鍚屾椂搴旂敤浜嗘ā绯婏紙Blur锛夊拰涓婁笅棰犲€掞紙Filpv锛変袱绉嶆护闀溿€備互涓嬫槸鍚屼竴鍥剧墖鐨勪袱绉嶆晥鏋滐細锛堝緱鐢↖E4.0浠ヤ笂鐗堢殑娴忚鍣ㄦ祻瑙堬級



銆€銆€鎬庝箞鏍凤紝杩樿鍚э紝杩欓噷瑕佽澶у娉ㄦ剰鍑犵偣:

銆€銆€1銆佸鏋滀娇鐢ㄥ鐨勬护闀滐紝閭ｄ箞婊ら暅闂磋浠ョ┖鏍煎垎寮€銆?

渚嬪锛?

<img src="test.jpg" style="Filter: alpha(opacity=30) Blur(amount=10)">

銆€銆€2銆佷竴涓护闀滀腑鐨勮嫢骞插弬鏁颁互閫楀彿鍒嗛殧銆?

渚嬪锛?

<img src="test.jpg" style="filter : blur(amount=30,strength=50)">

銆€銆€3銆丗ilter鍜屽叾浠栫殑CSS鏍峰紡鍒欎互鍒嗗彿鍒嗗紑銆?

渚嬪锛?

<img src="test.jpg" style="filter: blur(amount=30) ; Position: relative">

銆€銆€鎺ョ潃锛屾垜浠潵鐪嬬湅Filter鍒板簳鏈夊摢浜涙护闀溿€?

浜屻€侀潤鎬佹护闀滅殑绉嶇被

銆€銆€瑙嗚鏁堟灉鐨勬护闀溿€傚湪IE4.0浠ヤ笂鐗堜腑锛屾敮鎸佷互涓?4绉嶆护闀滐細

婊ら暅鍚?          璇存槑
Alpha             璁〩TML鍏冧欢鍛堢幇鍑洪€忔槑鐨勬笎杩涙晥鏋?
Blur              璁〩TML鍏冧欢浜х敓椋庡惞妯＄硦鐨勬晥鏋?
Chroma            璁╁浘鍍忎腑鐨勬煇涓€棰滆壊鍙樻垚閫忔槑鑹?
DropShadow        璁〩TML鍏冧欢鏈変竴涓笅钀藉紡鐨勯槾褰?
FlipH             璁〩TML鍏冧欢姘村钩缈昏浆
FlipV             璁〩TML鍏冧欢鍨傜洿缈昏浆
Glow              鍦ㄥ厓浠剁殑鍛ㄥ洿浜х敓鍏夋檿鑰屾ā绯婄殑鏁堟灉
Gray              鎶婁竴涓僵鑹茬殑鍥剧墖鍙樻垚榛戠櫧鑹?
Invert            浜х敓鍥剧墖鐨勭収鐗囧簳鐗囩殑鏁堟灉
Light             鍦℉TML鍏冧欢涓婃斁缃竴涓厜褰?
Mask              鍒╃敤鍙︿竴涓狧TML鍏冧欢鍦ㄥ彟涓€涓厓浠朵笂浜х敓鍥惧儚鐨勯伄缃?
Shadow            浜х敓涓€涓瘮杈冪珛浣撶殑闃村奖
Wave              璁〩TML鍏冧欢浜х敓姘村钩鎴栨槸鍨傜洿鏂瑰悜涓婄殑娉㈡氮鍙樺舰
XRay              浜х敓HTML鍏冧欢鐨勮疆寤擄紝灏卞儚鏄収X鍏変竴鏍?
銆€銆€杩欎簺婊ら暅灏卞儚鏄疨hotoShop杩欎竴绫诲浘鍍忓鐞嗚蒋浠舵墍鎻愪緵鐨勭壒鏁堜竴鏍凤紝鏈変簡杩欎簺鐗规晥锛屼綘灏卞彲浠ョ洿鎺ュ湪HTML涓鍥剧墖杩涜鐗规晥澶勭悊浜嗭紝鑰屼笉鐢ㄥ啀鐢ㄤ笓闂ㄧ殑鍥剧墖澶勭悊杞欢缂栬緫鍥剧墖浜嗐€備竴鑸€岃█锛岀敤寰楁渶澶氱殑鏄浘鐗囧拰鏂囧瓧銆傞偅涔堬紝灏辫鎴戜滑鏉ョ湅鐪嬪悇涓