How to apply an opacity without affecting a child element with html/css?

Question

I want to achieve this using html and css:

I have tried to set the opacity of the container

Answer 1

Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}

<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

See a working codepen here

Answer 2

You can use opacity in combination with background color, like this:

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​Live demo

Answer 3

Use such elements that you can add :before or :after. My solution

<div class="container">
    <div>
         Inside of container element is not effected by opacity. 
    </div>
</div>

Css.

.container{
    position: relative;
}

.container::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: .25
}

Answer 4

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.

Answer 5

As far as I know you can't do it in a simple way. There a couple of options here:

1. Use absolute positioning to position box "inside" the container.

   #container {
       opacity: 0.3;
       background-color: #777788;
       position: absolute;
       top: 100px;
       left: 100px;
       height: 150px;
       width: 300px;
   }
   #box {
       opacity: 1;
       background-color: #ffffff;
       position: absolute;
       top: 110px;
       left: 110px;
       height: 130px;
       width: 270px;
   }

   <div id="container"></div>
   <div id="box">
       <p>Something in here</p>
   </div>

2. Use Javascript - almost the same as above, but position and size don't have to be hardcoded.

Answer 6

Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.

Here is a input box that i created that i can turn on or off with the class property invisible by javascript

<div id="blackout" class="invisible">
    <div id="middlebox">
        <p>Enter the field name: </p>
        <input type="text" id="fieldvalue" />
        <input type="button" value="OK" id="addfname" />
    </div>
</div> 

CSS

#blackout {
    z-index: 9999;
    background: rgba(200, 200, 200, 0.6); 
    height: 100%;
    width: 100%;
    display: block;
    padding: 0px;
    clear: both;
    float: left;
    position: absolute;
    margin-top: -10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -10px;
}

#blackout #middlebox {
    border: thick solid #333;
    margin: 0px;
    height: 150px;
    width: 300px;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px 50px 0px 50px;

}

#middlebox p {
    float: left;
    width:100%;
    clear:both;
}

#middlebox input {
    clear:both;
    margin-bottom:10px;
}

#middlebox input[type=text]{
    width:100%;
}

#middlebox input[type=button]{
    float:right;
    width:30%;
}

.invisible{
    visibility:hidden !important;
}