Can a Child Div Have a Higher Opacity Than Parent with CSS

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

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/

Have a child opacity different then parent opacity with CSS

You can't the opacity cannot be greater than parent

but you can use two methods

I have used rgba rgba(0,0,0,0.0)

.rectangle-box {  width: 200px;  height: 30px;  background: rgba(128, 128, 128, 0.3);  float: right;  position: relative;}
.rectangle-red {  width: 65px;  height: 30px;  background: #ff4742;  opacity: 1;  float: left;}

<div class="rectangle-box">  <div class="rectangle-red"></div></div>

How to set opacity in parent div and not affect in child div?

May be it's good if you define your background-image in the :after pseudo class. Write like this:

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

Check this fiddle

Why can't child elements override the opacity of parent with a greater value?

I've never seen that as "overriding" or "underriding". It's a matter of relative opacities. If the parent has an opacity of 0.5, the child has it too (in relation to the parent's stacking context). The child can have its own opacity value between 0 and 1, but it will always be relative to the parent's opacity. So if the child also has opacity: 0.5 set, it will be 0.25 the opacity of some of the parent's sibling with opacity 1.

The spec treats it as an alpha mask, where opacity can only be removed. An element is either opaque, or has some degree of transparency (anything < 1):

Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

and later on:

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>

As for why it was implemented that way, I don't think it was intentional in the sense of "let's forbid that". Maybe this approach was chosen for being simpler to calculate, and only later an actual need for something different was recognized (then rgba color and background-color were introduced – and I may be wrong about the timeline here).

My child div's opacity keeps inheriting from its parent. How can I stop that behavior?

While you can't use opacity to make a descendant element more opaque than the parent, you can use rgba coloring to do what you want:

.box {
    background-color: rgba(0, 0, 0, .5);
    height: 60px;
    min-width: 100%;
}
#icon-menu {
    background-color: rgba(0, 0, 0, 1);
    padding-left: 75px;
    position: fixed;
    color: #ffffff;
    font-size: 40px;
}

jsFiddle example

Child element inheriting parent's opacity

Use the rgba() color method instead of opacity:

div.background {  background: url(klematis.jpg) repeat;  border: 2px solid black;}div.transbox {  margin: 30px;  background-color: rgba(255, 255, 255, 0.6);  border: 1px solid black;}div.transbox p {  margin: 5%;  font-weight: bold;  color: #000000;}

<div class="background">  <div class="transbox">    <p>This is some text that is placed in the transparent box.</p>    <input type="button" value="Ok">  </div></div>

Child with less opacity than parent

It can't be done using CSS 2, but can be done using CSS 3 http://www.css3.info/introduction-opacity-rgba/

If you used rgba for backgournd-color for the parent, inside elements will not get opacity.

If you don't want to use css3, you have no way except putting the child outside the parent and play with positions.

---

Related Topics