ホームページ > 記事 > ウェブフロントエンド > CSS の rgba、rgb、opacity の違いを図で詳しく説明
CSS の rgba、rgb、opacity の違いを図で詳しく説明
- yuliaオリジナル
- 2018-10-22 15:17:086112ブラウズ
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>レンダリング:
例 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 の違い: 
<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 は透明度を設定できますが、透明度は内部の要素には影響しません。内部の要素が優れています。 
上記は、rgba、rgb、不透明度の違いを紹介するもので、初心者の方でも実際に試してみて、その印象を深めていただければ幸いです。
CSS チュートリアル
をご覧ください。
以上がCSS の rgba、rgb、opacity の違いを図で詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。