CSSフィルター

前に言った事

CSSフィルターは要素のぼかし、シャープ化、変色などの操作に使用されます 通常、写真や背景などに適用されます。この記事では、CSS フィルターの filter

構文を詳しく紹介します

filter

適用対象: すべての要素

継承: none

Value: none | burn() ) | コントラスト() | グレースケール() | 不透明()

互換性: IE ブラウザーと android4 3-ブラウザはサポートしていません。Android 4.4 以降では、-webkit- プレフィックスを追加する必要があります

[注] 複数のフィルタを区切るにはスペースを使用します。フィルターは通常パーセンテージ (例: 75%) を使用しますが、小数で表すこともできます (例: 0.75)

グレースケール

グレースケール

グレースケールを使用すると、画像がグレーになります。値が 100% の場合、画像は完全にグレースケールに変換されます。値が 0% の場合、画像は変化しません。完全に不飽和で、値が 100% の場合、画像に変化はありません。 100% を超える値が許可され、彩度が高いことを示します。値が設定されていない場合、デフォルトの値は 1 です

brown

sepia

画像をセピアに変換するには、セピアを使用します。値が 100% の場合は完全にセピアになり、値が 0% の場合は画像が変更されません。設定されていない場合、値はデフォルトの 0 になります

Hue

hue-rotate

hue-rotate を通じて画像に色相の回転を適用します。 「角度」の値は、画像を調整するカラーサークルの角度を設定します。値が 0deg の場合、画像に変化はありません。値が設定されていない場合、デフォルト値は 0deg です。この値には最大値はありませんが、360deg を超える値は別の円を一周するのと同じになります

Invert

invert

invert で入力画像を反転します。 100% は完全な反転を意味し、値 0% は画像に変化がないことを意味します。値が設定されていない場合、デフォルトの値は 0 です

Transparency

opacity

opacity は画像の透明度を表します。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。値が設定されていない場合、値はデフォルトの 1 になります。この関数は既存の不透明度プロパティと非常に似ていますが、一部のブラウザではパフォーマンスを向上させるためにハードウェア アクセラレーションが提供される点が異なります。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。設定値がない場合、デフォルトは 1 です

Contrast

contrast

画像のコントラスト 値が 0% の場合、画像は完全にグレーになります。値は 100% で、画像は変更されません。値は 100% を超える場合があり、これはより低いコントラストが使用されることを意味します。設定値がない場合、デフォルトは 1 です

blur

blur

ぼかしを通して画像のガウスぼかしを設定します。 「半径」値はガウス関数の標準偏差、つまり画面上でブレンドされるピクセルの数を設定するため、値が大きいほどぼやけます。値が設定されていない場合、デフォルトは 0 です。このパラメータは CSS の長さの値を設定できますが、パーセンテージ値は受け入れられません。 -シャドウブラースプレッドカラー)は、画像に影効果を設定するために使用されます。シャドウは画像の下に合成され、特定の色でペイントできるマットのぼかしたオフセット バージョンにすることができます。この関数は、「inset」キーワードが許可されていないことを除き、タイプ <shadow> の値 (CSS3 コンテキストで定義されている) を受け入れます。この関数は既存の box-shadow 属性と非常に似ていますが、違いは、一部のブラウザでは、フィルターを通じてパフォーマンスを向上させるためにハードウェア アクセラレーションが提供されることです

<shadow>パラメーターは次のとおりです。

<offset-x><offset-y>(必须)   这是设置阴影偏移量的两个<length>值。<offset-x>设定水平方向距离，<offset-y>设定垂直距离。如果两个值都是0，则阴影出现在元素正后面
<blur-radius>(可选)          这是第三个<length>值。值越大，越模糊，则阴影会变得更大更淡。不允许负值。若未设定，默认是0(则阴影的边界很锐利)
<spread-radius>(可选)        这是第四个<length>值。正值会使阴影扩张和变大，负值会使阴影缩小。若未设定，默认是0(阴影会与元素一样大小)
<color>(可选)                查看<color>该值可能的关键字和标记。若未设定，颜色值会应用color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的

drop-shadow はインナーシャドウには対応していませんが、box-shadow では実現できない不規則な画像の影を実現できます

【注意】ボックスシャドウの詳しい情報はこちらに移動します

<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>

<p class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</p>
<p class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</p>

関連関連複数の CSS フィルターに関する記事がある場合は、PHP 中国語 Web サイトに注意してください。