CSSで、テキストや背景に、透明色を指定する方法

最終更新:2017-05-10 by Joe

CSSで、テキストや背景に、透明色を指定する方法です。

背景色を透明にする

いつもはRGBのHEX値(#rrggbb)で指定してる色を、このように変更します。

.some-block{
  background-color: rgba(33, 39, 98, 0.5);
}

「RGBA」と呼ばれ、Red, Blue, Greenに加えて、α値(アルファち)と呼ばれる「不透明度」を表す値を、0〜1の間で指定します。

ちなみにですが、「透明度」は通常「Transparency」という英語で表現されますが、「不透明度」を表す英語「Opacity」です。これはスタイル属性にも存在しますよね

.some-block{
  opacity: 0.3;
}

テキストの色を透明にする

テキストの色の指定は「color」属性でしたね。あとは応用です。

.some-text{
  color: rgba(33, 39, 98, 0.5);
}

 

以上です。うまく透明色を指定できたでしょうか?