HTMLで不透明度を設定する方法

奋力向前
リリース: 2021-10-06 20:00:26
オリジナル
8797 人が閲覧しました

設定方法: 1. RGBA() 関数、構文「属性: RGBA (赤の値、緑の値、青の値、透明度の値);」を使用します; 2. 不透明度属性、構文「」を使用します。不透明度: 透明度の値;"。透明度の値は、0.0 (完全に透明) から 1.0 (完全に不透明) まで設定できます。

HTMLで不透明度を設定する方法

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

#HTML で不透明度を設定するにはどうすればよいですか?

メソッド 1

rgba() は色の透明度を設定します

構文:

rgba(R,G,B,A);
ログイン後にコピー

RGBAとは、レッド(赤)、グリーン(緑)、ブルー(青)、アルファ(不透明)の3つの単語の略称です。 RGBA カラー値は、オブジェクトの不透明度を指定するアルファ チャネルを備えた RGB カラー値の拡張です。

rgba() の値の紹介:

R: 赤色の値。正の整数 (0 ~ 255)

G: 緑色の値。正の整数 (0 ~ 255)

B: 青色の値。正の整数 (0 ~ 255)

A: 透明度。値は 0 から 1 までです。

rgba()は色の透明度を設定するだけで、ページ レイアウトに多くの用途があります。たとえば、背景を透明にしますが、上のテキストは不透明にします。

コード例:

    rgba()  
背景色不透明,文字不透明!
背景色半透明,文字不透明!
ログイン後にコピー

レンダリング:

HTMLで不透明度を設定する方法,

メソッド 2

不透明属性の背景の透明度の設定

構文:

opacity: value ;
ログイン後にコピー

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

opacityプロパティは継承され、コンテナ内のすべての要素を透明にします;

コード例:

    opacity属性  

背景色不透明,文字不透明!

背景色透明,文字也透明!

ログイン後にコピー
レンダリング:


HTMLで不透明度を設定する方法

opacity:0.5;demo2コンテナのすべての要素を半透明に表示します。

要約: rgba() メソッドと opacity メソッドの両方で透明効果を実現できますが、rgba() は要素の色またはその背景色 (要素の子要素) にのみ作用します。 rgb() の透明度セットはその透明度効果を継承しません)、不透明度は継承であり、要素自体に影響を与えるだけでなく、要素内のすべてのサブ要素も透明にします。

推奨学習:

HTML ビデオ チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!