CSS3 はさまざまなフィルターをサポートしています。 CSS3 では、filter 属性を使用して要素にフィルター効果を追加できます。この属性にはさまざまな組み込みフィルター関数があります: Blur() はぼかしフィルターを設定し、brightness() は明るさフィルターを設定し、contrast() はコントラストを設定しますfilter、grayscale() グレースケールフィルターなどを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 は多くの種類のフィルターをサポートしており、css3 フィルターのフィルター属性を使用して、Photoshop に似たフィルター効果を作成できます。たとえば、写真のぼかし効果、影効果、カラー フィルター効果などを作成します。
| 説明 | |
|---|---|
| px) | 画像にガウスぼかしを設定します。 「半径」値は、ガウス関数の標準偏差、つまり画面上でブレンドされるピクセルの数を設定するため、値が大きいほどぼやけます。
値が設定されていない場合は、デフォルトの値が設定されます。は 0 です。このパラメータは CSS 長さの値を設定できますが、パーセント値は受け入れられません。 |
| %) | 画像に線形乗算を適用して、より明るくまたはより暗く見えるようにします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。他の値は線形乗数効果に対応します。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。|
| %) | 画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値は 100% で、画像は変更されません。値は 100% を超える可能性があり、より低い比較が使用されることを意味します。値が設定されていない場合、デフォルトは 1 です。|
| h-shadow v-shadow ブラー スプレッド カラー) | 画像に影効果を設定します。シャドウは画像の下に合成され、特定の色でペイントできるマットのぼかしたオフセット バージョンにすることができます。この関数は、「inset」キーワードが許可されていないことを除き、タイプ <ul>##<offset-x><li> <strong><offset-y></strong> <strong>(必須)</strong><small></small>これらは、影のオフセットを設定する 2 つの <length> 値です。 </li><offset-x><li> 水平距離を設定します。負の値を指定すると、要素の左側に影が表示されます。<strong><offset-y></strong>垂直方向の距離を設定します。負の値を指定すると、要素の上に影が表示されます。 <strong><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"> (オプション)<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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
