CSS3はフィルターをサポートしていますか?

CSS3 はさまざまなフィルターをサポートしています。 CSS3 では、filter 属性を使用して要素にフィルター効果を追加できます。この属性にはさまざまな組み込みフィルター関数があります: Blur() はぼかしフィルターを設定し、brightness() は明るさフィルターを設定し、contrast() はコントラストを設定しますfilter、grayscale() グレースケールフィルターなどを設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 は多くの種類のフィルターをサポートしており、css3 フィルターのフィルター属性を使用して、Photoshop に似たフィルター効果を作成できます。たとえば、写真のぼかし効果、影効果、カラー フィルター効果などを作成します。

#フィルター説明ぼかし(画像にガウスぼかしを設定します。 「半径」値は、ガウス関数の標準偏差、つまり画面上でブレンドされるピクセルの数を設定するため、値が大きいほどぼやけます。brightness(画像に線形乗算を適用して、より明るくまたはより暗く見えるようにします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。他の値は線形乗数効果に対応します。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。 contrast(画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値は 100% で、画像は変更されません。値は 100% を超える可能性があり、より低い比較が使用されることを意味します。値が設定されていない場合、デフォルトは 1 です。 drop-shadow(画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。 0% から 100% までの値は、効果の線形乗数です。設定されていない場合、値はデフォルトの 0 になります。

px)	値が設定されていない場合は、デフォルトの値が設定されます。は 0 です。このパラメータは CSS 長さの値を設定できますが、パーセント値は受け入れられません。
%)
%)
h-shadow v-shadow ブラー スプレッド カラー)	画像に影効果を設定します。シャドウは画像の下に合成され、特定の色でペイントできるマットのぼかしたオフセット バージョンにすることができます。この関数は、「inset」キーワードが許可されていないことを除き、タイプ (CSS3 コンテキストで定義) の値を受け入れます。この関数は既存の box-shadow box-shadow プロパティに非常に似ていますが、異なる点は、一部のブラウザでは、フィルタを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供されることです。 パラメータは次のとおりです: <ul>##<offset-x><li> <strong><offset-y></offset-y></strong> <strong>(必須)</strong><small></small>これらは、影のオフセットを設定する 2 つの <length> 値です。 </length> </li> <offset-x><li> 水平距離を設定します。負の値を指定すると、要素の左側に影が表示されます。<strong><offset-y></offset-y></strong>垂直方向の距離を設定します。負の値を指定すると、要素の上に影が表示されます。 <strong><length></length></strong>可能な単位を参照してください。<strong> </strong><br>両方の値が <strong>0<span style="font-family:Open Sans, sans-serif"> の場合、影は要素のすぐ後ろに表示されます (# が設定されている場合 </span></strong>##<blur-radius><span style="line-height: 1.5"> および/または </span><code style="font-style: normal;line-height: 1.5"><spread-radius>、<span style="line-height: 1.5">ぼかし効果が発生します</span><code style="font-style: normal;line-height: 1.5">)。 <span style="line-height: 1.5"></span><span style="line-height: 1.5"></span> <code style="font-style: normal;line-height: 1.5"> (オプション) これは 3 番目のコードです> の値です。値が大きいほどぼやけ、影が大きく明るくなります。負の値は許可されません。設定されていない場合、デフォルトは 0 (影の境界 非常に鮮明です)。 (オプション) これは 4 番目の 値です. 正の値を指定すると影が拡大して大きくなり、負の値を指定すると影が縮小します。設定されていない場合、デフォルトは 0 (影は要素と同じサイズになります)。注: Webkit およびその他の一部のブラウザは、4 番目の長さをサポートしていません。追加してもレンダリングされません。 (オプション) 候補となるキーワードとマークを表示します。設定されていない場合、色の値はブラウザに基づきます。 Gecko (Firefox)、Presto (Opera)、および Trident (Internet Explorer) では、 colorcolor 属性の値が適用されます。また、色の値を省略した場合、WebKit では影が透明になります。 <code style="font-style: normal;line-height: 1.5">グレースケール(%)
hue-rotate(deg)	画像に色相回転を適用します。 「角度」の値は、画像を調整するカラーサークルの角度を設定します。値が 0deg の場合、画像に変化はありません。値が設定されていない場合、デフォルト値は 0deg です。この値には最大値はありませんが、360degを超えると一周したことと同じになります。
invert(%)	入力画像を反転します。値は変換のスケールを定義します。値の 100% は完全な反転です。値 0% は、画像に変化がないことを意味します。 0% から 100% までの値は、効果の線形乗数です。値が設定されていない場合、値はデフォルトの 0 になります。
opacity(%)	画像の透明度を変換します。値は変換のスケールを定義します。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。 0% から 100% までの値はエフェクトの線形乗数であり、画像サンプルの数を乗算するのと同じです。値が設定されていない場合、値はデフォルトの 1 になります。この関数は既存の不透明度属性と非常に似ていますが、一部のブラウザではフィルターを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供される点が異なります。
saturate(%)	画像の彩度を変換します。値は変換のスケールを定義します。値 0% は画像の彩度が完全に低下していることを意味し、値 100% は画像に変化がないことを意味します。他の値は効果の線形乗数です。 100% を超える値が許可され、彩度が高くなります。値が設定されていない場合、値はデフォルトの 1 になります。
sepia(%)	画像をセピアに変換します。値は変換のスケールを定義します。値が 100% の場合は完全にセピアになり、値が 0% の場合は画像が変更されません。 0% から 100% までの値は、効果の線形乗数です。設定されていない場合、値はデフォルトの 0 になります。
url()	URL 関数は、SVG フィルターを設定する XML ファイルを受け入れます。ミラーし、特定のフィルター要素を指定するアンカー ポイントを含めることができます。 #例: filter: url(svg-url#element-id)

使用例

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSS3はフィルターをサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。