ホームページ  >  記事  >  ウェブフロントエンド  >  要素の透明度を設定する css3 プロパティとは何ですか?

要素の透明度を設定する css3 プロパティとは何ですか?

青灯夜游
青灯夜游オリジナル
2021-12-16 11:02:342692ブラウズ

要素の透明度を設定するための CSS3 属性には 2 つのタイプがあります: 1. 要素の透明度レベルを設定できる不透明度属性。構文は「opacity: 透明度の値;」です。2. opacity() 関数と一緒に使用できる filter 属性。要素の透明度を設定します。構文「filter:opacity(value%);」。

要素の透明度を設定する css3 プロパティとは何ですか?

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

要素の透明度の css3 属性を設定します

1.不透明度属性

不透明度を 1 つ設定します属性 要素の透明度レベル。

構文:

opacity: value;
  • value: 不透明度を 0.0 (完全に透明) ~ 1.0 (完全に不透明) で指定します。

#例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img  src="img/2.jpg" / alt="要素の透明度を設定する css3 プロパティとは何ですか?" >
		<img  src="img/2.jpg"   style="max-width:90%"/ alt="要素の透明度を設定する css3 プロパティとは何ですか?" >
	</body>
</html>

要素の透明度を設定する css3 プロパティとは何ですか?

2. filter 属性

filter 属性が定義されています要素 (通常は 要素の透明度を設定する css3 プロパティとは何ですか?) の視覚効果 (ぼかしや彩度など)。

filter 属性は、要素の透明度を設定するために opacity() 関数とともに使用されます。

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

例:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img  src="img/2.jpg" / alt="要素の透明度を設定する css3 プロパティとは何ですか?" >
		<img  src="img/2.jpg"   style="max-width:90%"/ alt="要素の透明度を設定する css3 プロパティとは何ですか?" >
	</body>
</html>

要素の透明度を設定する css3 プロパティとは何ですか?

(学習ビデオ共有:

css ビデオ チュートリアル)

以上が要素の透明度を設定する css3 プロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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