つまり、私たちは過去に頭痛の種を開発させました。彼は他の人とは違っていた。彼はそれをサポートしませんでした、そして、彼は他の人がそれを支持しなかった何かを持っていました。今日は、彼の機能の1つであるフィルターを簡単に紹介します。
CSSフィルターは、主に画像のさまざまな特殊効果を実現するために使用されます。それはウェブサイトの作成において非常に魔法のような役割を持っています。 Webサイトは、CSSフィルターを介してより美しくすることができます。 CSSでは、フィルター属性はフィルターの意味を表し、テキスト、写真、テーブルのフィルター効果を設定できます。
構文：style = {filter：filtername（fparameter1、fparameter2 ...）}
注：フィルターナームは、フィルターの名前、fparameter1、fparameter2などです。フィルターのパラメーターです。
13 CSSフィルター効果
1。フィルター：クロマ - 特別な色を透明にします。
構文：style =フィルター：Chroma（color = color）
タグ：色：#rrggbb形式、任意。
2。フィルター：ぼやけて、高速運動効果、つまりぼかし効果を作成します。
構文：style = filter：blur（add = add、direction =方向、強度=強度）
注：追加：通常1または0。方向：角度、0-315度、ステップの長さは45度です。強度：効果成長の価値、通常5。
3。フィルター：flipv--垂直鏡像を作成します。
構文：style = filter：flipv
4。フィルター：アルファ - 透明な階層を設定します
構文：style = filter：alpha（ofacity = ofacity、ofacity = finishopacity、style = style、startx = startx、starty = starty、finishx = finishx、finish = finishy）
注：不透明度：値を開始し、値は0-100、0は透明で、100は元の画像です。 finishopacity：ターゲット値。スタイル：1または2または3; startx：任意の値。 Starty：任意の価値
5。フィルター：Fliph-水平ミラーイメージを作成します。
構文：style = filter：fliph
6。フィルター：グロー - 近くのオブジェクトの端の外側の栄光。
構文：スタイル=フィルター：グロー（色=色、強度=強度）
ラベル：色：明るい色。強度：強度（0-100）
7。フィルター：マスク - オブジェクトに透明なマスクを作成します。
構文：style =フィルター：マスク（color = color）
8。フィルター：フィルター：Xray-Makeオブジェクトは、X線で照らされているように見えます。
構文：style = filter：xray
9。フィルター：反転インバートカラー。
構文：style = filter：invert
10。フィルター：Dropshadow-オブジェクトの固定された影を作成します。
構文：style = filter：dropshadow（color = color、offx = offx、offy = offy、陽性=ポジティブ）
ラベル：色：#rrggbb形式、任意。 offx：x軸偏差値。 Offy：Y軸偏差値。陽性：1または0。
11。フィルター：灰色が写真をグレーします。
構文：style =フィルター：灰色
12。フィルター：波をリッピングする効果。
構文：フィルター：wave（add = add、add、freq = freq、lightstrength = strength、fase = phase = strength = strength）
注：追加：通常1または0。 Freq：変形値。軽量：変形率;フェーズ：角度変形率。強度：変形強度。
13.シャドウ - オフセット固定影を作成します。
構文：フィルター：影（色=色、方向=方向）
ラベル：色：#rrggbb形式;方向：角度、0-315度、ステップサイズは45度です。
CSSフィルターを使用する場合、注意すべきことの1つは、現在のWebサイトの生産レイアウトでは、フィルターがDIVに接続されることが多いことです。 HTMLコードでDIVのIDを設定するだけで、フィルターは機能しません。このID属性は、スタイルまたはCSSで定義する必要があります。そうしないと、機能しません。
コードの1つの文だけが必要であり、Webサイトを作成する際に写真はPPTドキュメントのように自由に切り替えることができます。とても簡単です！変換する前に、3つの基本コードを理解する必要があります。
回転：style = filter：progid：dmimagetransform.microsoft.basicimage（回転：1）
背景色を削除：スタイル=フィルター：Chroma（color =＃000000）
勾配色の設定色：スタイル=位置：相対;左：0PX; TOP：0PX;フィルター：ProgID：DimbyAgetransForm.Microsoft.Gradient（startColorStr =＃ff0000、endcolorStr =＃ffff00、gradientType = 1）
素晴らしいレビュー：ウェブサイト制作のためのCSSフィルター効果の完全なコレクション
以下は、画像変換フィルターの完全なコレクションです。友達に役立つことを願っています〜！ ！ ！
ランダム変換：progid：dmimagetransform.microsoft.revealtrans（enabled = true、transition = 23）
正方形が小さくなっています：progid：dmixtagetransform.microsoft.iris（irisstyle = square、motion = in）
正方形が大きくなっています：progid：dmimagetransform.microsoft.iris（irisstyle = square、motion = out）
クロススマッシング：progid：dmimagetransform.microsoft.iris（irisstyle = cross、motion = in）
Cross-Dive：progid：dmixtagetransform.microsoft.iris（irisstyle = cross、motion = out）
星の形が大きくなっています：progid：dmimagetransform.microsoft.iris（irisstyle = star、motion = out）
星の形は徐々に小さく：progid：dmixegetransform.microsoft.iris（irisstyle = star、motion = in）
サークルが大きくなっています：progid：dmimagetransform.microsoft.iris（irisstyle = circle、motion = out）
サークルが徐々に小さく：progid：dmimagetransform.microsoft.iris（irisstyle = circle、motion = in）
ダイヤモンドの形状は徐々に小さく：progid：dmimagetransform.microsoft.iris（irisstyle = diamond、motion = in）
ダイヤモンドが大きくなっています：progid：dmimagetransform.microsoft.iris（irisstyle = diamond、motion = out）
プラスのサインは大きくなることです：progid：dmimagetransform.microsoft.iris（irisstyle = plus、motion = out）
プラス記号は徐々に小さくなります：progid：dmimagetransform.microsoft.iris（irisstyle = plus、motion = in）
上向き消去：プロトコル：dxmimagetransform.microsoft.blinds（bands = 1、direction = up）
消去：プロトコル：dmimagetransform.microsoft.blinds（bands = 1、方向=ダウン）
左の消去：プロトコル：dmimagetransform.microsoft.blinds（bands = 1、方向=左）
右に消去する：プロトコル：dmimagetransform.microsoft.blinds（bands = 1、方向=右）
左および右中央からの撤回：progid：dmimagetransform.microsoft.barn（motion = in、orientation = vertical）
ランダム溶解：progid：dmimagetransform.microsoft.randomdissolve（enable = true）
中央領域が上下に拡張されます：progid：dxmimagetransform.microsoft.barn（motion = out、Orientation = Horizontal）
中央で左右に拡張する：progid：dmixegetransform.microsoft.barn（motion = out、orientation = vertical）
ランダムな水平線：progid：dxmimagetransform.microsoft.randombars（方向=水平）
ランダムな垂直線：progid：dmimagetransform.microsoft.randombars（方向=垂直）
上部および下部中央の収縮：progid：dmimagetransform.microsoft.barn（motion = in、orientation = horizontal）
標準グラデーション変換：BlendTrans（Enabled = True、パーセント= 10）
調整可能な勾配変換：Progid：dmixegetransform.microsoft.fade（enabled = ture、overlap = 1.0）
右下に挿入：プロトコル：dxmimagetransform.microsoft.inset（enabled = ture）
非表示ストレッチ：progid：dmimagetransform.microsoft.stretch（stretchstyle = hide）
progid：dmixigetransform.microsoft.stretch（stretletstyle = push）
ロータリーストレッチ：progid：dmimagetransform.microsoft.stretch（stretchstyle = spin）
反時計：progid：dmimagetransform.microsoft.radialwipe（wipestele = wedge）
放射線：progid：dmimagetransform.microsoft.radialwipe（wipestele = radial）
モザイク効果：progid：dmimagetransform.microsoft.pixelate（maxsquare = 20）
クロック：Progid：dmimagetransform.microsoft.radialwipe（wipeStyle = clock）
はしごの左下：progid：dxmimagetransform.microsoft.strips（motion = leftdown）
はしごの右上：progid：dmimagetransform.microsoft.strips（motion = rightup）
はしごの左上：progid：dxmimagetransform.microsoft.strips（motion = leftup）
はしごの右下：progid：dmimagetransform.microsoft.strips（motion = rightdown）
スパイラル収縮：progid：dmimagetransform.microsoft.spiral（gridsizex = 20、gridsizey = 20）
Windmill Rotation：Progid：dmimagetransform.microsoft.wheel（スポーク= 20）
Z字型のねじれ：progid：dmimagetransform.microsoft.zigzag（gridsizex = 20、gridsizey = 20）
blinds：progid：dmimagetransform.microsoft.blinds（bands = 6、方向=ダウン）
：progid：dxmingagetransform.microsoft.blinds（bands = 6、direction = up）
：progid：dxmingagetransform.microsoft.blinds（bands = 60、方向=ダウン）
：progid：dxmingagetransform.microsoft.blinds（bands = 60、direction = up）
vブラインド：Progid：dmimagetransform.microsoft.blinds（bands = 6、方向=右）
：progid：dxmingagetransform.microsoft.blinds（bands = 6、方向=左）
：progid：dxmingagetransform.microsoft.blinds（bands = 60、方向=右）
：progid：dmimagetransform.microsoft.blinds（bands = 60、方向=左）
切り替えスライド：progid：dmimagetransform.microsoft.slide（slidestyle = swap、bands = 1）
：progid：dxmingagetransform.microsoft.slide（slidestyle = swap、bands = 20）
プッシュスライド：progid：dmimagetransform.microsoft.slide（slidestyle = push、bands = 1）
：progid：dxmingagetransform.microsoft.slide（slidestyle = push、bands = 20）
スライドを非表示：progid：dmimagetransform.microsoft.slide（slidestyle = hide、bands = 1）
：progid：dxmingagetransform.microsoft.slide（slidestyle = hide、bands = 20）
ファジーの進歩：progid：dmimagetransform.microsoft.gradientwipe（gradiantsize = 0.5、wipeStyle = 0、motion = forwar
：progid：dmimagetransform.microsoft.gradientwipe（gradiantsize = 0.5、wipeStyle = 0、motion = reverse）
：progid：dmincigetransform.microsoft.gradientwipe（gradiantsize = 0.5、wipeStyle = 1、motion = forwar
：progid：dmincigetransform.microsoft.gradientwipe（gradiantsize = 0.5、wipeStyle = 1、motion = reverse）
垂直チェスボード：progid：dmimagetransform.microsoft.checkerboard（方向=右、squaresx = 12、squaresy = 12）
：progid：dmimagetransform.microsoft.checkerboard（方向=左、squaresx = 12、squaresy = 12）
：progid：dmimagetransform.microsoft.checkerboard（方向=右、squaresx = 2、squaresy = 2）
：progid：dxmingagetransform.microsoft.checkerboard（方向=左、squaresx = 2、squaresy = 2）
：progid：dmimagetransform.microsoft.checkerboard（方向=右、squaresx = 60、squaresy = 60）
：progid：dmimagetransform.microsoft.checkerboard（方向=左、squaresx = 60、squaresy = 60）
Horizontal Chessboard：Progid：dmimagetransform.microsoft.checkerboard（方向=ダウン、Squaresx = 12、Squaresy = 12）
：progid：dxmingagetransform.microsoft.checkerboard（方向= up、squaresx = 12、squaresy = 12）
：progid：dxmingagetransform.microsoft.checkerboard（方向=ダウン、squaresx = 2、squaresy = 2）
：progid：dmincigetransform.microsoft.checkerboard（方向= up、squaresx = 2、squaresy = 2）
：progid：dmimagetransform.microsoft.checkerboard（方向=ダウン、squaresx = 60、squaresy = 60）
：progid：dxmingagetransform.microsoft.checkerboard（方向= up、squaresx = 60、squaresy = 60）