ホームページ > ウェブフロントエンド > フロントエンドQ&A > HTML画像の透明度を設定する方法

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

青灯夜游
リリース: 2023-01-03 09:24:19
オリジナル
9787 人が閲覧しました

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

プログラミングの概要

! !

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート