ホームページ > 記事 > ウェブフロントエンド > css3で低輝度表示を実現する方法

css3で低輝度表示を実現する方法

WBOYオリジナル: 2021-12-15 17:36:033020ブラウズ

filter 属性と Brightness() 関数を使用すると、CSS で低輝度表示を実現できます。filter 属性は、絵素の視覚効果を定義するために使用されます。brightness() 関数と併用して設定します要素の明暗のスタイル。構文「element" {filter:brightness(明暗の値)}」。

css3で低輝度表示を実現する方法

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

css3 で低輝度を実現する方法

css で低輝度を実現したい場合は、filter 属性を使用できます。

filter 属性は、要素 (通常は css3で低輝度表示を実現する方法 ) の視覚効果 (ぼかしや彩度など) を定義します。

brightness() 関数は、画像に線形乗算を適用して、画像をより明るくまたはより暗く表示します。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。他の値は線形乗数効果に対応します。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。

例は次のとおりです:

<html>
<head>
<style>
.img1{
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>

出力結果:
css3で低輝度表示を実現する方法

(学習ビデオ共有: css ビデオチュートリアル)

以上がcss3で低輝度表示を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 Filter

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css3で子要素を中央揃えにする方法次の記事：css3で子要素を中央揃えにする方法

続きを見る