株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

CSS:opacityで透過したエリアは文字も半透明になってしまう

2016.9.20(Tue) 20:56 | CSS | sofuku

背景を透過する場合、よく使われるのがCSSのopacityです。

個人的にも、Ajax処理中のLoading表示などで結構使います。

 

しかし、opacityで透過した要素の中で文字を表示すると文字まで透過されてしまいます。

こんな感じ。

opacity_sample.jpg

CSS

.opacity {
    opacity: 0.5;
    background-color: #2d2d2d;
    color: #ffffff;
}

 

文字は透過したくない、という場合はopacityでなくrgbaを使います。

rgba_sample.jpg

CSS

.rgba {
    background-color: rgba(45, 45, 45, 0.5);
    color: #ffffff;
}

透過エリアの中に記載していても、文字は透過されていないと思います。

使い方は、プロパティの値として(今回はbackground-colorに適用しています)10進数のRGB値とalpha値をカンマ区切りで指定します。

alpha値は0~1の数値で指定します。

 

rgbaはとても便利ですが、画像を透過する場合には使えません。

画像を透過するならopacityを使います。

opacityとrgba、用途によってきちんと使い分けていきましょう。