Css3 filter_html/css_WEB-ITnose

2015-12-20 17:05:13

css3 フィルター効果。 。 。 。

css3フィルターフィルター効果、フィルターはW3C CSSフィルター効果1.0で定義されたフィルター効果であり、CSSを使用して画像のぼかし、明るさ、コントラスト、彩度、およびその他の効果を変更するフィルターです。

index.html のコードは次のとおりです:

<br />style.css中样式设置为：

その中で、background-attachment 属性は、

背景画像がスクロール軸でどのように移動するかを定義するために使用されます。Value:scroll | 固定 | 継承:

スクロール: 背景画像はページのスクロール軸とともに移動しません

inherit: の属性設定を継承します。親クラス;

ここで、フィルター効果の表示を正式に開始します:

(1) filter:blur (blur)

style.css ファイルにフィルター属性を追加します:

blur (blur),値が大きいほど、画像はぼやけます。効果は次の図のようになります:

(2) フィルター:明るさ (明るさ)

明るさの値の範囲は (-1~ 1)、値が大きいほど明るさが増します。効果の比較は次のとおりです。 in me in in in in in in air 彩度

(3) フィルタ: Saturate (彩度)

彩度は 100% かかります中間値として、彩度が 100% より大きい場合、彩度が 100% 未満の場合、レンダリングは次のようになります。は 30%

フィルター: セピア (100%);パラメーター範囲（0％〜100％）効果の比較は次のとおりです。元画像 エフェクト図

(6) filter: invert (invert)

filter:invert(80%); パラメータ設定範囲 (0% ~ 100%)、エフェクト図は次のとおりです:

元の写真にin invert in in invert

7）フィルター：色相（色相）

値範囲は0度から360度です、効果は次のとおりです。 in in /

(8) フィルター: コントラスト (コントラスト)、100% は、中央の値

には次の効果があります:

　　　　　　　　　　　　　　　　　　　　　　原图　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　效果图<br />至此，filter所有的参数效果已经介绍完毕，希望对大家有所帮助。