HTML では、filter 属性を使用して画像を明るくすることができます。画像要素に「filter:brightness(% value)」スタイルを追加するだけです。 filter属性では画像の明るさを調整するbrightness()関数を設定しており、この関数の値が「100%」を超えると画像が明るくなります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
HTML では、filter 属性を使用して画像を明るくすることができます。実装方法を理解するために例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img1 {
-webkit-filter: brightness(50%);
/* Chrome, Safari, Opera */
filter: brightness(50%);
}
.img2 {
-webkit-filter: brightness(120%);
/* Chrome, Safari, Opera */
filter: brightness(120%);
}
</style>
</head>
<body>
<p>原图:</p>
<img src="img/1.jpg" alt="Pineapple" width="300">
<p>filter属性控制图片的亮度:</p>
<img class="img1" src="img/1.jpg" alt="Pineapple" width="300">
<img class="img2" src="img/1.jpg" alt="Pineapple" width="300">
</body>
</html>レンダリング:
説明:
フィルター属性は、要素の視覚効果 (例: ぼかしや彩度) を定義します。
brightness(%) 関数は、画像の明るさを調整し、画像に線形乗算を適用して、より明るくまたはより暗く見えるようにします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。他の値は線形乗数効果に対応します。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がHTMLで写真を明るくする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
