0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[opacity]と[rgba]の使い分け(HTML,CSS)

Last updated at Posted at 2020-08-08

#薄さを変える[opacity]と[rgba]の使い分け
どちらも対象を薄くすることが可能ですが違いは何でしょうか。

opacityは全部を薄くします。
rgbaは部分的に薄くすることが可能です(背景だけなど)。

例えば

.class{
opacity:0.5;
}

と書けばclass全体が半分薄くなります。ただ、classの中の背景だけは薄くしたいということもあるでしょう。その時は

.class{
background-color:rgba(〇,〇,〇,0.5);
}

とすると背景だけうすくすることができます。

ちなみにopacityは和訳すると不透明度なので、1が一番濃く、0に近づくにつれて薄くなります。
rgbaは左から順にred,green,blue,alphaで、このalphaが透明度を指定できるのですね。(opacityと同様に1が一番濃く、0に近づくにつれて薄くなります。)

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?