css filter_html/css_WEB-ITnoseの例

css3 フィルターは、通常の画像や SVG 画像に対して特殊効果のレンダリングを行うことができ、非常に強力なので、今日はフィルターの使い方を簡単にまとめます

構文:

element {        filter: none | <filter-function > [ <filter-function> ]*       }        <img  class="grayscale lazy"  src="/static/imghwm/default1.png"  data-src="image.jpg"     style="max-width:90%"  style="max-width:90%" alt="css filter_html/css_WEB-ITnoseの例" >.grayscale {    filter: graycale(1);    //灰度属性    //可填写范围0~1,默认值为0,即灰度不改变}            

上記 最初のフィルターは導入: グレースケール (グレースケール)

次の 9 つのフィルターを以下に紹介します

2.blur() ガウスぼかし

使用法: このメソッドは、周囲のピクセル値を合計し、この点のピクセル値パラメーターを平均します。パラメータと長さの値を受け入れます。デフォルト値は 0 です。

.blur {    filter: blur(1px)} 

効果:

3.brightness() 明るさ

使用法: このメソッドは、画像の明るさパラメータを調整します: デフォルト値は 1 ですが、すべての値を入力できます。画像の明るさは 1 より大きくなります

.brightness {    filter: brightness(0.6)}

レンダリング:

4.contrast コントラスト

使用法: コントラストを調整すると、明るい領域はより明るくなり、暗い領域はより暗くなります。パラメータ: デフォルト値は 1 、最小値は 0 で、最大値はありません

.contrast{    filter: contrast(150%)}

レンダリング:

5.drop-shadow はシャドウを設定します

使用法: 使用効果は box-shadow と似ていますただし、ブラウザは加速パラメータを提供する場合があります。最初と 2 番目の値はオフセット (負の値は許可されます)、3 番目のパラメータはブラーの程度を表します (負の値は許可されません)、4 番目のパラメータは色

.drop-shadow{    filter: drop-shadow(20px, 20px, 10px, black)}

レンダリング:

6.hue-rotate Hue

使用法: 色相 (つまり、特定のピクセルの値) を変更するために使用されます パラメーター: 角度で表され、値が 360 度の場合、画像は残ります変更されていない

rreee

レンダリング：

7.invert（）画像の反転usage：画像パラメーターの色を反転する：デフォルト値は0、最大値は1

.hue-rotate{    filter: hue-rotate(90deg)}

.opacity 透明度

使用法: このスタイルは不透明度属性パラメータに似ています: 0%~100%

.invert{    filter: invert(100%)}

Rendering:

9.saturate() saturation

使用法: 画像の彩度パラメータを変換します: デフォルト値は100%ですが、100%を超える値も可能です

.opacity {    filter: opacity(50%)    }

レンダリング:

.saturate{    filter: saturate(200%)}

10.セピアブラウン深め(古い写真感を出します)

使用法: 画像を茶色に変換します パラメータ: デフォルト値は0です範囲は 0~1 です。

![    图片描述][9]

レンダリング

11. 画像を合成処理します。画像を任意に組み合わせて希望の結果を得ることができます

.sepia{    filter: sepia(100%)}

レンダリング:

フィルター属性を使用して、簡単に実行できます。お気に入りの写真を使いやすいスタイルに変更します

.... .... 多くの場合、完成したものは、まるで凹凸鏡のように、無数の画像に変わります。正面から見ると、見えるものだけがぼやけます。