HTML画像の透明度を設定する方法-フロントエンドQ&A-php.cn

HTML画像の透明度を設定する方法

青灯夜游

リリース： 2023-01-03 09:24:19

オリジナル

9762 人が閲覧しました

html 画像画像の透明度を設定する方法: 1. 画像画像に「opacity:value;」スタイルを設定し、値は 0.0 (完全に透明) から 1.0 (完全に不透明) の間です。 . img画像を与える「filter:opacity(%);」スタイルを設定します。

HTML画像の透明度を設定する方法

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

html img 画像の透明度の設定

方法 1: 不透明度を使用して画像の透明度を設定します

Opacity プロパティは、要素の透明度レベルを設定します。

構文:

opacity: value;

ログイン後にコピー

属性値:

値: 不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明)

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img2{
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="demo/img/5.jpg"    style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
		</div>
		<div>
			<p>设置透明度的图：</p>
		　　<img  class="img2" src="demo/img/5.jpg"    style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

HTML画像の透明度を設定する方法

#[推奨チュートリアル:

CSS ビデオチュートリアル、「html ビデオチュートリアル」]

方法 2: filter:opacity( % を使用する) )

filter 属性は、要素 (通常は HTML画像の透明度を設定する方法

) の視覚効果 (例: ぼかしや彩度) を定義します。

不透明度(%): 画像の透明度を変換します。値は変換のスケールを定義します。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。 0% から 100% までの値はエフェクトの線形乗数であり、画像サンプルの数を乗算するのと同じです。値が設定されていない場合、値はデフォルトの 1 になります。この関数は既存の不透明度属性と非常に似ていますが、一部のブラウザではフィルターを通じてパフォーマンスを向上させるハードウェアアクセラレーションが提供される点が異なります。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img2{
				-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
				filter: opacity(20%);
				
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="demo/img/5.jpg"    style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
		</div>
		<div>
			<p>设置透明度的图：</p>
		　　<img  class="img2" src="demo/img/5.jpg"    style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

HTML画像の透明度を設定する方法 ##プログラミング関連の知識の詳細については、次を参照してください: