How to change parent opacity without altering child opacity

1

So i have found plenty of code examples of how to do this but none offer a real explaination on how to recreate the example on your own, or use it in your own way. can some one explain this for me. i know i have to assign a position to my div elements and then adjust the z-index to that the content is layered on top of the faded element. ive seen this alot for example:

wrapper {
position: relative;
z-index: 1
}
mid-see-through{
position:absolute;
zindex:2;
}
content {
position: relative;
z-index:3;
}

but this either doesnt work or im implementing it correctly. can someone please help me? my code is below if it helps

css

.page-bg {
  margin: 3px 3px;
  border: 3px;
  padding: 10px 10px;
  background-color: gray;
  /* ADD A FADED EDGE LATER */
}
#div-wrapper {
  position: relative;
}
.content-outer {
  position: relative;
  margin: 4px;
  padding: 2px 2px;
  background-color: #222;
 /* opacity: .5; */
  z-index: 3;
}
.content {
  position: relative;
  border: #333 inset 3px;
  z-index: 4;
}
#div-wrapper .view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}
#div-wrapper .content-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .4;
  z-index: 1;
}

html

<!-- div-wrapper holds background -->
<div id="div-wrapper" class="page-bg">
  <!-- content-outer should be transparent -->
  <div class="content-outer">
    <!-- content should be visible and should be the on-top of content-outer -->
    <div class="content">
      <h3>
        <img class="view" src="blank" alt=" Profile Image" />
      </h3>
    </div>
  </div>
</div>
2

You could try to make the parents position relative, and the child absolute. or in your case, 2 absolute children, one having opacity applied to it as well as the relative.

You need to take the elements out of the document flow, which i think absolute positioning does.

i think that might do it, but have never tried

3

man i have to be honest, im not understanding what your telling me to do. could you maybe give a small example or tell me what i need to change in my code? i have a relative element and i do have 2 absolute elements but the txt within the element is still inheirting. can you help or point me to a good demo?

4

This should steer you in the right direction @smarandache1990 :
http://jsfiddle.net/hzSG8/

5

Do you have an example of what you are looking to do?

Depending on what you want, this might work:

http://codepen.io/michealhall/pen/ObOVOm

If all you want to do is alter the opacity of the background-color of the parent, you can use an rgba() color in the styling for that element. This allows you to supply an opacity value for the color itself.

However, I know of no way off the top of my head to allow you to alter the opacity of the entirety of a parent object without also changing the opacity of the child. That is the nature of the styling and the parent -> child relationship.

6

Interesting use of :after - never tried that! I’ll have to look more closely at how that is working …