CSS の rgba、rgb、opacity の違いを図で詳しく説明-CSSチュートリアル-php.cn

CSS の rgba、rgb、opacity の違いを図で詳しく説明

yulia

リリース： 2018-10-22 15:19:38

オリジナル

6164 人が閲覧しました

CSS で背景色を設定するには、background-color、rgb、rgba など、さまざまな方法があります。rgba、rgb、opacity の違いを知っていますか?この記事では、rgba、rgb、不透明度の違いについて説明します。興味のある方は参考にしてください。

rgb と rgba の違い:

rgb は赤、緑、青を指します。値は 0 ～ 255 です。例: 黒は rgb(0,0, と表されます)。 0)

rgba は赤 (赤)、緑 (緑)、青 (青)、透明度 (不透明度) を指し、透明度の値は 0 から 1 の間です。 rgba と rgb は、rgba は背景色の透明度を設定できますが、rgb は設定できないということです。

例 1: 背景色を赤に設定するには、background: rgb(255,0,0) を使用します

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: rgb(255,0,0);
   }
  </style>
 </head>
 <body>
  <div class="a1"></div>
  <div class="a2"></div>
 </body>
</html>

ログイン後にコピー

レンダリング:

CSS の rgba、rgb、opacity の違いを図で詳しく説明例 2: 背景: rgba(255,0,0,0.5) を使用して背景色を半透明の赤に設定します

 .a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: rgba(255,0,0,0.5);
   }

ログイン後にコピー

レンダリング:

##rgba() と opacity の違い: CSS の rgba、rgb、opacity の違いを図で詳しく説明

どちらも透明効果を設定できますが、opacity 属性は For 要素とすべての要素に作用します。サブ要素などの要素内では、rgba はそれ自体にのみ作用し、サブ要素には作用しません。具体的な違いについては、レンダリングを比較してください。

例 3: 不透明度: 0.5 を使用して透明度を設定します。コードは次のとおりです:

<style type="text/css">
   .a1{
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid black;
   }
   .a2{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: red;
    opacity: 0.5;
   }
</style>
<body>
  <div class="a1"></div>
  <div class="a2">我是盒子里面的内容，文字不需要透明</div>
</body>

ログイン後にコピー

レンダリング:

レンダリングから、rgba、rgb、opacity の違いがわかります。rgb は背景色のみを設定できます。rgba は透明度を設定できますが、透明度は内部の要素には影響しません。内部の要素が優れています。 CSS の rgba、rgb、opacity の違いを図で詳しく説明
上記は、rgba、rgb、不透明度の違いを紹介するもので、初心者の方でも実際に試してみて、その印象を深めていただければ幸いです。