ホームページ > 記事 > ウェブフロントエンド > CSS3はフィルターをサポートしていますか?
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」キーワードが許可されていないことを除き、タイプ 2682287aecd16e99c4f70c025ad645ed (CSS3 コンテキストで定義) の値を受け入れます。この関数は既存の box-shadow box-shadow プロパティに非常に似ていますが、異なる点は、一部のブラウザでは、フィルタを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供されることです。 2682287aecd16e99c4f70c025ad645edパラメータは次のとおりです: <ul>##8b89863bbb9a724179580669ccdd6d16<li> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <strong>(必須)</strong><small></small>これらは、影のオフセットを設定する 2 つの d82af2074b26fcfe177e947839b5d381 値です。 </li>8b89863bbb9a724179580669ccdd6d16<li> 水平距離を設定します。負の値を指定すると、要素の左側に影が表示されます。<strong>d1d21daad911d430a139ccdb7ee6c1d6</strong>垂直方向の距離を設定します。負の値を指定すると、要素の上に影が表示されます。 <strong>d82af2074b26fcfe177e947839b5d381</strong>可能な単位を参照してください。<strong> </strong><br>両方の値が <strong>0<span style="font-family:Open Sans, sans-serif"> の場合、影は要素のすぐ後ろに表示されます (# が設定されている場合 </span></strong>##747111f72d266ea1b5d91cda9f8aa39e<span style="line-height: 1.5"> および/または </span><code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d、<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>
b9b524289c2502a536310f30f2708b18<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 サイトの他の関連記事を参照してください。