【CSS】文字や画像は透過させず、背景のみ透明度を操作する方法

2013/10/11 2017/12/26

背景色を黒とした適当なボックスを作成し、画像、テキストを配置。
そのボックスの透明度を操作する時に opacity を使うと、文字や画像までもが透過してしまいます。
こういう場合の適切な方法。

透明度を操作する方法

先ほどの内容をCSSで書くとこんな感じ。

.box1 {
	background-color: #000;
	color: #fff;
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}

.box1 {

background-color: #000;

color: #fff;

-moz-opacity: 0.7;

-khtml-opacity: 0.7;

opacity: 0.7;

}

上記内容では、配置した画像やテキストまでもが一緒に透過してしまいます。
背景のみを透過させたいって場合は、下記の書き方にすると幸せになれます。

.box1 {
	background-color: #000;
	color: #fff;
	background-color: rgba(0,0,0,0.7);
}

.box1 {

background-color: #000;

color: #fff;

background-color: rgba(0,0,0,0.7);

}

ベンダープレフィックスもなく、スッキリしましたね。

よく考えたら、 opacity の出番が無くなる感じがします（苦笑）

[tgAmazonItemLookup asin="B01LQQH8E2" related="1"]

: Bootstrap使用時にplaceholder属性の文字色を変更する方法。

Bootstrap使用時、HTML5の placeholder 属性の文字色を変更したい場合の方法を忘備録としてポストします。

: 【CSS】CSSの「overflow:scroll」でボックス領域にスクロールバーを表示させる方法。

決まったサイズのDIV領域に「overflow」を設定し、スクロールバーを表示させて狭い範囲でも有効に利用する方法です。

: 【CSS】tableタグのtd中でURLなどアルファベット文字列を改行させたい場合の書き方

URLなどアルファベットや記号が連続している場合、テーブルの横サイズを500px等に指定していても（自動的に）改行せず、横サイズいっぱいまで続いてしまうような場合に自動改行させるCSSを紹介します。

: 【CSS】縦幅サイズがわからない要素の縦中央にテキストを配置する方法

heightがわからないボックスの中にテキストを縦方向中央に配置する方法を備忘録としてポストします。