誰もが色にとても敏感だと思います。私たちの目が見るところにはどこにでも色があります。では、CSS で色を表すには何を使用すればよいのでしょうか? CSS で色を定義する方法は 3 つあります。カラー メソッド (RGB、RGBA、HSL、HSLA)、16 進数のカラー値、定義済みのカラー名の使用です。 RGB と RGBA をよく使用します。それでは、それらの違いについてお話ししましょう。 rgbとrgbaの意味 RGBは、Red (赤)、Green (緑)、Blue (青) の略語です。 RGBAカラー値は RGB カラー値の拡張であり、オブジェクトの不透明度を指定するアルファ チャネルが追加されています。 1. 基本的な構文: RGBカラー値の検索については、https://www.sioe.cn/yingyong/yanse-rgb-16/を参照してください(16進数はCSSでさまざまな色を表すためにも使用でき、さまざまな色の16進値もこのWebサイトで見つけることができます)。 2. ブラウザの互換性: RGB対応: RGBA対応: http://caniuse.com/ この Web サイトを使用すると、使用したい属性のブラウザ互換性の問題を確認できます。 3. rgbとrgbaの書き方 rgbの書き込み形式: rgb(90,50,25); で最初の数字(90)は赤色(赤の値)を表します。 2番目の数字(50)は緑色(緑の値)を表します。 3番目の数字(25)は青色(青の値)を表します。数字が大きくなるほど(255 以下)、対応する色が追加されます。 rgba の記述形式: rgba(90,50,25,0.5); 上記から、 RGBAカラー値は RGB カラー値の拡張であり、オブジェクトの不透明度を指定するアルファ チャネルが追加されていることがわかります。最初の 3 つの値は、rgb で表される値と同じです。a の値は 0 から 1 の間で、0 は透明色、1 は不透明、0.5 は各色 (R、G、B) の 50% の透明度、つまり各色が半透明であることを表します。ここでの a は .5 と省略することもできます。小数点の透明性がある限り、このように省略することができます。 RGBとRGBAの違い 1. rgb+不透明度(IEとは互換性がありません) <div class="box"> <p>rgb+不透明度:</p> <div class='one'>25%</div> <div class='two'>50%</div> <div class='three'>75%</div> <div class='four'>100%</div> </div> 。箱{ 下マージン: 10px; オーバーフロー: 非表示; } .box>div{ 幅:100ピクセル; 高さ:100px; フロート: 左; } .box>div{ 背景:rgb(255,0,0) } .box>.one{ 不透明度:.25; } .box>.2{ 不透明度:.5; } .box>.three{ 不透明度:.75; } .box>.4{ 不透明度:1 } 上記の例から、透明度が変化すると、div が透明になり、div 上のテキストも透明になり、不明瞭になっていくことがわかります。 2. RGBA rgba の a はオブジェクトの透明度を表すため、透明度の問題を説明するために rgba で background を直接使用できます。以下にいくつか例を挙げます。 <div class="box1"> <p>RGBA</p> <div class='one'>25%</div> <div class='two'>50%</div> <div class='three'>75%</div> <div class='four'>100%</div> </div> ```css .box1>div{ 幅:100ピクセル; 高さ:100px; フロート: 左; } .box1>.one{ 背景:rgba(255,0,0,1); } .box1>.2{ 背景:rgba(255,0,0,.75); } .box1>.three{ 背景:rgba(255,0,0,.5); } .box1>.4{ 背景:rgba(255,0,0,.25); } 上記の例から、透明度が変化すると div が透明になり、div 上のテキストは透明度の影響を受けず、テキストの元の色が維持されることがわかります。 RGBA は背景に適用できるだけでなく、色が設定されている場所であればどこでも使用できます。次に例をいくつか示します。 1 つ目は、フォントの色です。色を設定するときに透明度を設定できます。 <p class="p1">フォントの色</p> <p class="p2">フォントの色</p> .p1{ 色:rgb(255,0,0) } .p2{ 色:rgba(255,0,0,.5) } 2番目: 境界線の色 border-color <div class="div3"></div> <div class="div4"></div> .div3,.div4{ 幅:100ピクセル; 高さ:100px; 背景:#f00; } .div3{ 境界線:5px 実線 rgb(0,0,0) } .div4{ 境界線:5px 実線 rgba(0,0,0,.2) } 3番目のタイプ: フォントの影の色 text-shadow <p class="p1">フォントの影の色</p> <p class="p2">フォントの影の色</p> .p1{ テキストシャドウ:1px 2px 1px rgb(255,0,0); } .p2{ テキストシャドウ:1px 2px 1px rgba(255,0,0,.5); } 4番目: 境界線の影の色を変更する <div class="div3"></div> <div class="div4"></div> .div3,.div4{ 幅:100ピクセル; 高さ:100px; 背景:#000; } .div3{ ボックスの影: 1px 5px 5px rgb(255,0,0); 下マージン: 20px; } .div4{ ボックスの影: 1px 5px 5px rgba(255,0,0,.5); } 要約する 1. 上記の例から、単一の色は要素全体の透明度に影響を与えないため、RGBA は要素の CSS 透明度を設定するよりも優れていることもわかります。境界線やフォントなど、要素の他の属性には影響せず、他の要素の関連する透明度にも影響しません。 2. 透明度には不透明度を使用します。親要素で不透明度を使用すると、他の子要素に影響します。 3. 最後に、RGBA メソッドは RGBA 属性をサポートするブラウザーでのみ正常に表示されることをお伝えしておきます。 CSS3 rgb と rgba (透明色) の詳しい使い方については、これで終わりです。CSS3 rgb と rgba に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySql8.0 のトランザクション分離レベルエラーの問題を解決する
>>: ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)
この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...
降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...
デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...
目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...
インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...
背景Shell の mysql-client を介して MySQL データベースにログインする場合、...
<本文> <div id="ルート"> <h2&...
序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...
目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...
この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具...
BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...
疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...