To achieve transparency in your backgrounds, opt for setting a background-color using rgba values, with the 'a' representing transparency level.

Instead of:

background-color: rgb(255,0,0); opacity: 0.7;

you should use

background-color: rgba(255,0,0,0.7);

In CSS, opacity is not inherited but rather a post-rendering group transform. Essentially, if a <div> has an opacity set, the div and all its children are rendered into a temporary buffer, which is then composited onto the page with the specified opacity setting.

The specific outcome you're aiming for depends on the exact rendering effect you wish to achieve, which is not clearly defined in the question.

Here's a handy tip for achieving transparency in your child element to match the parent, while also adding specific styling:

.wrapper {
     background-color: rgba(0,0,0,0.5);
}

.element {
     background-color: rgba(128,128,128,0);
}

In discussions like this and others, it has been suggested that the most effective way to tackle this issue is to utilize RGBA/HSLA or opt for a transparent PNG.

Alternatively, if you're looking for an unconventional solution similar to one mentioned in another response (which happens to be on my own website), I've created a unique script called "thatsNotYoChild.js" that addresses this problem automatically:

This script essentially leverages JavaScript to detach all child elements from the parent div, repositioning them without being direct children of the element anymore.

Personally, I view this as a final option, but I found it interesting to develop something that achieves this effect for those who are interested.

Opacity in child elements is typically inherited from their parent element.

However, we can utilize the css position property to achieve the desired result.

One way to do this is by placing the text container div outside of the parent div but using absolute positioning for the intended effect.

Desired Outcome------------------>>>>>>>>>>>>

HTML

            <div class="container">       
              <div class="bar">
                  <div class="text">The text inherits opacity from the parent div.</div>
              </div>
            </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

Result:--

The text is not visible due to inheriting opacity from the parent div.

Solution ------------------->>>>>>

HTML

       <div class="container">  
         <div class="text">Opacity is not inherited from the parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

Output :

The text is now visible with the same color as the background because the div is no longer within the transparent div.

It is not specified whether the background should be a color or an image, but @Blowski has already provided a solution for colored backgrounds. For images, you can use the following hack:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

This allows you to adjust the opacity color and create gradient effects.

.wrapper {
  width: 630px;
  height: 420px;
  display: table;
  background: linear-gradient(
    rgba(0,0,0,.8), 
    rgba(0,0,0,.8)), 
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
 }

h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  }

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

I encountered similar issues and decided to research potential solutions ( 3 in total ) for this particular problem. Below are the possible approaches that you can explore:

Approach-1: Incorporate a pseudo markup element either before or after as a background

.parentContainer {
    position: relative;
}
.parentContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;
}
.childContent {
    position: relative;
    color: red;
    z-index: 1;
}

Approach-2: Utilize rgba colors with alpha values instead of opacity.

 <div id="parentContainer" style="background: rgba(255,255,255,0.6);">
    <div id="childContent">
         Content ...
    </div>
 </div>

Approach-3: Implement a background div with absolute positioning to overlay one element over another.

<div class="parentContainer">
  <div class="childContent">
    Here is the content.
  </div>
  <div class="background"></div>
</div>


.parentContainer {
  position: relative;
}
.childContent {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  opacity: .5;
}

Each situation requires a unique approach, but I've discovered a helpful technique for setting opacity on a div's direct children while keeping one fully visible. Here's an example in code:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

And the corresponding CSS:

div.parent > div:not(.child1){
    opacity: 0.5;
}

If there are background colors or images on the parent element, you can adjust their opacity using rgba and alpha filters.

After finding the answers above too complex, I decided to simplify it as follows:

#kb-mask-overlay { 
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%; 
    z-index: 10000;
    top: 0; 
    left: 0; 
    position: fixed;
    content: "";
}

#kb-mask-overlay > .pop-up {
    width: 800px;
    height: 150px;
    background-color: dimgray;
    margin-top: 30px; 
    margin-left: 30px;
}

span {
  color: white;
}

<div id="kb-mask-overlay">
  <div class="pop-up">
    <span>Content of no opacity children</span>
  </div>
</div>
<div>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.

Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. 
 </p>
</div>

kb-mask-overlay serves as your parent element with opacity, while pop-up acts as your child elements without opacity. Everything below them corresponds to the rest of your site.

Here is the solution that worked for me:

1. Made the following changes:

From:

opacity: 0.52;
background-color: #7c7c7c;

To:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

If you need to convert hex color with opacity to rgba format,
you can use a tool like

It appears that elements with display: block property do not adopt the opacity of their parent elements with display: inline.

Check out this example on Codepen

Could it be due to invalid markup causing the browser to separate them secretly? The source code doesn't indicate such behavior. Am I overlooking something here?

If you find yourself needing to utilize an image for a see-through background, there is a possibility of working around it by employing a pseudo element:

html

<div class="overlay"> 
   <p>I am fully opaque</p>  
</div>

css

.overlay, .overlay > * {
  position: relative;
}
.overlay:before {
  content: " ";
  opacity: 0.4;
  background: url("http://placekitten.com/200/300") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

Instead of focusing on static parent-child layout, my answer delves into the realm of animations.

During a recent SVG demo, I encountered a situation where the SVG needed to be contained within a div (to adhere to the parent's dimensions for path animation). The challenge was that this parent div had to remain invisible during the SVG path animation and then smoothly transition its opacity from 0 to 1. To overcome this, I discovered a clever trick using the `visibility` property (where a child with `visibility: visible` can still be seen within a parent set to `visibility: hidden`):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

Subsequently, in JavaScript code, you can remove the `invisible` class after a timeout, add the `opacity-zero` class, trigger a layout update with something like `whatever.style.top;`, and then remove the `opacity-zero` class:

var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);

I recommend checking out this demo for a visual representation: http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

To tackle this issue, I started by generating and storing a faded image that I later implemented in the css background. The python script I utilized was:

from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')

In this scenario, im1.jpg represented a basic white image with identical dimensions as im2.jpg.