Child opacity

HTML & CSS
1 
   <div class='block'>

      <h1 class='text-center'><span id='currentTemp'>Calculator</span></h1>

      <p align="left">Javascript Calculator</p>
      <p align="left"> 
      <form class = "" name = "calculator">
       <input type = "text" id = "display" readonly class = "displayWell"
      </form>
      
      </p>


    </div>

The text input seems to be inheriting it’s opacity from the parent div… what could I do to make it solid, but keep the parent div transparent.

  .block{
    background-color:#e7a61a;
    opacity:.85;
    color:purple;
    padding: 50px;
    width:75%;
    margin-right:auto;
    margin-left:auto;
    border-radius:15px;
    font-size:1.5em;
    padding-bottom:2%;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);   
-webkit-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
-moz-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
    border:1px solid black
}

  .displayWell{
   
    opacity:2;
    color:purple;
    padding: 50px;
    width:75%;
    margin-right:auto;
    margin-left:auto;
    border-radius:15px;
    font-size:1.5em;
    padding-bottom:2%;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);   
-webkit-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
-moz-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
    border:1px solid black
}
2

Hi,

When you apply opacity to an element it becomes ‘atomic’ in CSS terms in that all children are included in the opacity setting you made and you cannot return them to opaque.

If all you want is some transparency on the background color then use rgba instead which includes an opacity setting.

.block {
	background-color:rgba(231, 166, 26, .85);
	color:purple;
	padding: 50px;
	width:75%;
	margi:auto;
	border-radius:15px;
	font-size:1.5em;
	padding-bottom:2%;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
	border:1px solid black
}

If you absolutely must have opacity then you need to remove the element you want opaque from that context and then absolutely place it into position so that it is no longer a child of the element with opacity defined.

3 Likes
3

That appears to be working, thank you… but when I run the CSS through the analyzer, (what ever code pen uses) I get an error about fall back color… I’ve tried reading up on a couple variants of this, but nothing logical that passes the analyzer…

Fallback background-color (hex or RGB) should precede RGBA background-color. (Google it)

4

This is what I’ve been trying the most…

    background-color:rgb(255, 165, 0);
    background-color:rgba(255, 165, 0, .85);
    color:purple

;

5

…no avail.

    background-color:orange;
    background-color:rgba(255, 165, 0, .85);
    color:purple;
6

Both of those should be fine. But the support for rgba() is widespread, so unless you need support for IE8, everything else supports it.

3 Likes
How to make bootstrap navbar opaque on scroll without affecting links
7

Codepen anaylser shows no problems with that.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.