减少div上的不透明度，而不会降低内容的不透明度 [英] Reducing the opacity on a div without reducing the opacity of the contents

问题描述

要减少网页内容容器背景的透明度，同时不会降低内容的透明度。

 < div id = container> 
< div id =page contents> 
页面内容在这里，像惊人的文章和所有。 
< / div> 
< / div> 
  

需要能够扩展内容，因此不能有固定的高度。 p>

绝对定位在内容下面意味着两个div之间没有关系，它不会随内容扩展，所以我认为这是一个死胡同，随意别说。

不能使用Jquery，因为太可能太迟而不是即时。

可能需要使用png背景图片，但希望不要因为它是一个模板，需要能够根据颜色更改颜色计划。

可以根据需要生成图像，但不理想。

工作在IE！当然！

有任何建议吗？

解决方案

一个透明的PNG。

但更进一步，特别是你对可变颜色方案的评论，也许挂钩到RGBA支持将为你工作。有一个不错的文章（包括如何破解IE - 它不支持它）在这里：

http://css-tricks.com/rgba-browser-support/

Want to reduce the opacity of page contents container background without reducing the opacity of the contents.

<div id="container">
   <div id="page contents">
   page contents goes here, like amazing articles and all that.
   </div>
</div>

Needs to be able to expand with the content, thus can't have a fixed height.

Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.

Can't use Jquery as could be too laggy and not instant. Other options preferred please.

May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.

Could generate images on demand but not ideal.

Oh and to top it off cant use CSS3 as wont work in IE! of course!

Any suggestions?

解决方案

My first impulse is a transparent PNG.

But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:

http://css-tricks.com/rgba-browser-support/

这篇关于减少div上的不透明度，而不会降低内容的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！