検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLで写真を明るくする方法

HTMLで写真を明るくする方法

青灯夜游
青灯夜游オリジナル
2021-06-08 15:31:564717ブラウズ

HTML では、filter 属性を使用して画像を明るくすることができます。画像要素に「filter:brightness(% value)」スタイルを追加するだけです。 filter属性では画像の明るさを調整するbrightness()関数を設定しており、この関数の値が「100%」を超えると画像が明るくなります。

HTMLで写真を明るくする方法

このチュートリアルの動作環境: 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>

レンダリング:

HTMLで写真を明るくする方法

説明:

フィルター属性は、要素の視覚効果 (例: ぼかしや彩度) を定義します。

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

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

以上がHTMLで写真を明るくする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html Filter
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLフォームのタグとは何ですか次の記事：HTMLフォームのタグとは何ですか

関連記事

続きを見る