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 | Hello World | Hello World | Hello World |
| 透過30％ | 透過50％ | 透過80％ | 透過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 | Hello World | Hello World | Hello World |
| 透過30％ | 透過50％ | 透過80％ | 透過100％ |
HTML
<body>
<section class="box1">
<p>Hello World</p>
</section>
</body>CSS
.box1 p{
color:rgba(0, 0, 0, .3);
}面倒だなぁ〜サクッと作りたい方はこちら
なんと考えなくても作れてしまう優れたリンクをご紹介っと言うか僕がいつも利用しているサイトです。
たまにはズルしちゃってもいいんじゃないんですか？っと言うノリで紹介しています。
その名も「bad company」この名前かなりインパクトが強くて良いです。
良いのか悪いのか...。笑
ありがたい機能を提供してくださるので感謝しながら時々、使用します。
おそらく、他にも良いサイトはたくさんあるんじゃないかなと思いますが、僕はここが一番好きです。どなたかここも良いよ〜っと思っている方がいらっしゃいましたらコメント下さい。
