1. ホーム
  2. html

[解決済み] CSSでテキストや画像の背景を透明にするには?

2022-03-15 02:31:53

質問

CSSのみを使って background は半透明で、中身(テキストや画像)は不透明なのでしょうか?

テキストと背景を別々の要素にすることなく実現したいのですが。

試してみると

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

子要素は親の不透明度が適用されるようなので opacity:1 は相対的なものであり opacity:0.6 を親とする。

解決方法は?

半透明の PNG または SVG の画像を表示するか、CSSを使用します。

background-color: rgba(255, 0, 0, 0.5);

css3.infoの記事を紹介します。 不透明度、RGBA、妥協点 (2007-06-03).


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>