如何向嵌套项目添加不同的不透明度？ [英] How do you add different opacities to nested items?

问题描述

我有两个嵌套项目在HTML中，我想给wrraping一个不透明度0.8和一个里面的不透明度1。

我想我明白为什么它不工作，但我怎么可以模仿那个效果？

这是一个简化的HTML，显示问题，我想要绿色方块是坚实的。

I have two nested items in HTML and I want to give the wrraping one opacity 0.8 and the one inside it opacity 1.
I think I understand why it does not work, but, how can I mimick that effect?
Here is a simplified HTML that shows the problem, I want the green square to be solid.

<div style='background-color:red;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: absolute;
            top:0;
            left:0;
            opacity:0.8'>

    <div style='width:150px; height:150px; background-color:green; opacity:1'>
      Some content
    </div>
</div>

推荐答案

如果使用 rgba CSS属性而不是opacity属性可以实现：

If you use the rgba CSS property instead of the opacity property you can achieve this:

<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'>
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div>
</div>

演示： http://jsfiddle.net/ScHgC/

这篇关于如何向嵌套项目添加不同的不透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！