如何使用CSS给文本或图像透明背景？ [英] How do I give text or an image a transparent background using CSS?

问题描述

有可能只使用CSS，使元素的 background 半透明，但元素的内容（文字&图像）不透明？ / p>

我想实现这一点，而不需要将文本和背景作为两个单独的元素。

：

  p {position：absolute; background-color：green; filter：alpha（opacity = 60）;不透明度：0.6;} span {颜色：白色; filter：alpha（opacity = 100）; opacity：1;}  

 < p& < span> Hello world< / span>< / p>  

看起来孩子元素受到父母的不透明度，因此 opacity：1 相对于 opacity：0.6 。

解决方案

使用半透明 PNG 图片或使用CSS3：

  background-color：rgba（255,0,0,0.5）; 
  

这里是css3.info的文章， Opacity，RGBA and compromise （2007-06-03）。

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.

When trying:

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>

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.

解决方案

Either use a semi-transparent PNG image or use CSS3:

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

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

这篇关于如何使用CSS给文本或图像透明背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！