ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のグレースケールを設定する方法

CSSで背景画像のグレースケールを設定する方法

王林オリジナル: 2021-03-04 14:31:215861ブラウズ

CSS で背景画像のグレースケールを設定する方法: [filter:grayscale(100%)] などのフィルター属性フィルターを使用して設定できます。これは、画像が完全にグレースケールに変換されることを意味します。グレースケール画像。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

CSS にはフィルター属性フィルターがあり、ぼかし、彩度、グレースケールなどの要素 (通常は img) の視覚効果を定義します。

属性構文:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

共通属性値:

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

例 1:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
</style>
</head>
<body>

<p>图片转为黑白色:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>

</body>
</html>

実行結果:

CSSで背景画像のグレースケールを設定する方法

例 2:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
</style>
</head>
<body>

<p>图片使用高斯模糊效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>

</body>
</html>

実行結果:

CSSで背景画像のグレースケールを設定する方法

(学習ビデオ共有:

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

Example 3 :

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>

</body>
</html>

実行結果:

CSSで背景画像のグレースケールを設定する方法

CSSで背景画像のグレースケールを設定する方法

関連記事