如何使用 CSS 为文本或图像赋予透明背景?

2022-01-30 00:00:00 opacity html css

是否可以仅使用 CSS 使元素的 background 半透明但元素的内容(文本和图像)不透明?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?

我想在不将文本和背景作为两个独立元素的情况下完成此操作.

I'd like to accomplish this without having the text and the background as two separate elements.

尝试时:

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.

It looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.

推荐答案

要么使用半透明 PNG 或 SVG 图片或使用 CSS:

Either use a semi-transparent PNG or SVG image or use CSS:

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

这是一篇来自 css3.info 的文章，不透明度、RGBA 和妥协(2007-06-03).

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

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

相关文章