透過opacityとrgbaの違い【CSS】
スポンサーリンク

01はじめに

透過しているつもりなのに、表示がされないことってありませんか?コードも間違いが見当たらなくてこまねくこともあると思います。
僕が昔やらかしていた間違いだったのですが、そのopacityとrgbaの違いについて今日は学んでいこうと思います。

Opacityを使った透過

opacityを使用する際は、ブロックの背景だったり画像、border、そして文字などがあります。
しかし、このopacityと言うのは全体を透過してしまいます。

opacity
XX{
opacity:1.0;
}
opacityの値は100%を1.0と表記します。
80%→0.8 60%→0.6 40%→0.4
とこんな具合に表記します。

 

  

Hello World

透過30%

  

Hello World

透過50%

  

Hello World

透過80%

  

Hello World

透過100%

HTML
<body>
 <section class="box1">
  <p>Hello World</p>
 </section>
</body>
CSS
.box1{
  width:100px;
  Hight:100px;
  color:#3399ff;
  opacity:0.3;
}

 

rgbaを使った透過

rgbaは個別に透過することができます。例えば、文字だけ、画像だけ、などと言った具合に使用することができます。

opacity
rgba(0-255[赤の値],0-255[緑の値],0-255[青の値],0.0-1.0[透明度])
  

Hello World

透過30%

  

Hello World

透過50%

  

Hello World

透過80%

  

Hello World

透過100%

HTML
<body>
 <section class="box1">
  <p>Hello World</p>
 </section>
</body>
CSS
.box1 p{
  color:rgba(0, 0, 0, .3);
}

面倒だなぁ〜サクッと作りたい方はこちら

なんと考えなくても作れてしまう優れたリンクをご紹介っと言うか僕がいつも利用しているサイトです。
たまにはズルしちゃってもいいんじゃないんですか?っと言うノリで紹介しています。
その名も「bad company」この名前かなりインパクトが強くて良いです。
良いのか悪いのか...。笑
ありがたい機能を提供してくださるので感謝しながら時々、使用します。
おそらく、他にも良いサイトはたくさんあるんじゃないかなと思いますが、僕はここが一番好きです。どなたかここも良いよ〜っと思っている方がいらっしゃいましたらコメント下さい。

スポンサーリンク

この記事が気に入ったらフォローしよう

おすすめの記事