Can a child div have a higher opacity than parent with css?

问题

I have a background on a page body that is an image which I want to show through the first level of divs but not the second

<body>
      <div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p>
          <div style='background-color:#fff;'><p>This is a child div that I want to be all white</p>
          </div>
      </div>
</body>

Obviously the second level div picks up the opacity of .9 as well is there a way to override this?

回答1:

Hi you can do as like this

You can define parent opicity

and child as like you

ex.

css

.parent{
    padding:20px;
    background:rgba(112,81,246,0.3);
}
.child{
    padding:20px;
    background:rgba(112,81,246,0.6);
}

HTML

<div class="parent">
<div class="child">Hello i m child</div>
</div>

Live demo here http://jsfiddle.net/rohitazad/PC4sL/

回答2:

Any of these should get you started:

Answer 1

Answer 2

来源：https://stackoverflow.com/questions/10005047/can-a-child-div-have-a-higher-opacity-than-parent-with-css

标签

css

css3

opacity

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!