我如何给文字或图像透明的背景使用 CSS？

Question

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.

</div>

转载于:https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css

Answer 1

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).