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.

Steven Mays · Accepted Answer · 2015-10-28T02:58:22.010

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;
}

Up. If you need that textbox to be see through wrap it in a separate div. https://jsfiddle.net/n6qzsttL/ — Steven Mays, Oct 28 '15 at 02:59

score 1 · Answer 2 · answered Oct 28 '15 at 02:56

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.

score 1 · Answer 3 · answered Oct 28 '15 at 05:30

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;
}

Solid text over transparent transparent background

3 Answers3