Solid text over transparent transparent background

Question

I have the following code:

<div class="row front-page-img">
  <img class="img-responsive" src="http://www.echomountainresort.com/wp-content/uploads/2014/10/echo-mountain-concert_banner_bg.jpg" style="box-shadow: rgba(0,0,0,.2) 3px 5px 5px;">
  <div class="front-page-container-search">
    <h3>This is the text that I wish could be solid white, but instead it is transparent</h3>
    <form>
      <div class="input-group">
        <input type="text" class="form-control">
          <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
          <span class="glyphicon glyphicon-search"></span>
        </button>
        </span>
      </div>
    </form>
  </div>
</div>


.front-page-img {
    margin-right: 0px;
}

.front-page-container-search{
    position:absolute;
    left: 50px;
    right:50px;
    width: 200px;
    color: white;
    text-align: center;
    top: 75px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid black;
    opacity: 0.7;
    margin: 0 auto;
}

As you can see here at my jsFiddle my text is not solid white and my input is transparent. Ideally I would like to have solid white text and a solid input. I attempted to use the accepted answer from this older question and tried playing with z-index, but no luck there. Any help is appreciated.

Answer 1

Set your opacity to 1 and wrap the divs correctly. Here is the fiddle. https://jsfiddle.net/n6qzsttL/

<div class="row front-page-img ng-scope">
<img class="img-responsive" src="http://www.echomountainresort.com/wp-content/uploads/2014/10/echo-mountain-concert_banner_bg.jpg" style="box-shadow: rgba(0,0,0,.2) 3px 5px 5px;">
<div class="front-page-container-search">
     <h3>This is the text that I wish could be solid white, but instead it is transparent</h3>

</div>
<form>
    <div class="input-group">
        <input type="text" class="form-control"> <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
      <span class="glyphicon glyphicon-search"></span>

        </button>
        </span>
    </div>
</form>

and the CSS

.front-page-img {
margin-right: 0px;
}
.front-page-container-search {
    position:absolute;
    left: 50px;
    right:50px;
width: 200px;
color: white;
text-align: center;
top: 75px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid black;
opacity: 1;
margin: 0 auto;
}

Answer 2

There's nothing wrong with your z-indexes. You're setting the opactiy of .front-page-container-search to 0.7 . This does what it says on the tin; it renders the element - including everything inside of it - with an opacity of 0.7 .

If you don't want the opacity to propagate through the children, don't set it on the parent. Remove this property, and your text, and input, will be solid white.

Answer 3

Currently you are using the opacity for .front-page-container-search as 0.7. Please use 1 instead of 0.7 .

.front-page-container-search{

    /* Theoretically for IE 8 & 9 (more valid) */
      /* ...but not required as filter works too */
      /* should come BEFORE filter */
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // IE8

      /* This works in IE 8 & 9 too */
      /* ... but also 5, 6, 7 */
      filter: alpha(opacity=100); // IE 5-7

      /* Modern Browsers */
      opacity:1;
}