filter 属性と Brightness() 関数を使用すると、CSS で低輝度表示を実現できます。filter 属性は、絵素の視覚効果を定義するために使用されます。brightness() 関数と併用して設定します要素の明暗のスタイル。構文「element" {filter:brightness(明暗の値)}」。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 で低輝度を実現する方法
css で低輝度を実現したい場合は、filter 属性を使用できます。
filter 属性は、要素 (通常は ) の視覚効果 (ぼかしや彩度など) を定義します。
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>出力結果: 
(学習ビデオ共有: css ビデオ チュートリアル)
以上がcss3で低輝度表示を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
