Why can't I change the opacity of h1 element back to 1 after changing opacity of html element to 0.5?

Question

I added a background image to my html element in css so it expands with the size of the web browser. I changed the opacity in this html element to 0.5. I want to change the child elements (specifically h1, and paragraph elements) back to an opacity of 1 so the text is not transparent. It doesn't work. Please help :)

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel = "stylesheet" href = "style.css">
</head>

<body>

    <p id ="topBar"></p>

    <h1>Heading</h1>

    <h3>Name</h3>

    <p> 
        Paragraph
    </p>

    <h3>Heading</h3>

    <p>More text</p>

    <h3>Send us an email!</h3>

    <form>
        <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
        <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
        <input type="submit" value ="Send" name="send">
    </form>

    <p id ="bottomBar"></p>
</body>
 </html>

CSS:

html {

background: url(pen.jpg) no-repeat center fixed;
background-size: cover;


font-family: Garamond;
text-align: center;

opacity: 0.5;

}

h1 {

opacity: 1;
 }

@LaurIvan Nope. The h1 rule is more specific than the html rule so it applies. — JJJ, Aug 01 '16 at 09:11
the entire html document has an opacity directive, it affects everything regardless of specificity or precedence. @LaurIvan adding !important does nothing. you need to set the lower opacity only on specific elements. — Andrei C, Aug 01 '16 at 09:15
@SLowLoris but how? h1 is nested inside html hence according to css priority the rules of h1 should override that of html — geeksal, Aug 01 '16 at 09:17
@geeksal opacity can't be overridden. if you have an element with an opacity of 0.5 and a child in that element with an opacity of 0.5, the child element will have an opacity of 0.25. it already has a reduced opacity from its parent and a further reduction from its own directive. pretty straightforward — Andrei C, Aug 01 '16 at 09:51

Hilario Goes · Answer 1 · 2016-08-01T09:35:50.447

2

By default if the parent has opacity applied to it then all the child elements also take the same opacity. Even if you make the child elements as opacity:1 it won't work.

In your case 'html' has opacity:0.5 so its child i.e 'h1' having opacity:1 will still have 0.5 opacity.

For you problem there are 2 solutions:-
1. Make the background image i.e. 'pen.jpg' slightly transparent through a photo editing software like Photoshop.
2. Use the background image in 'after' pseudocode. i.e.

html::after {
      content: "";
      background: url(pen.jpg);
      opacity:0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;   
}

Any one of the above will work for you.

edited Aug 01 '16 at 09:35

answered Aug 01 '16 at 09:23

Hilario Goes

433
5
15

Wasn't my answer correct? Why the negative vote? – Hilario Goes Aug 01 '16 at 09:25
1

Downvote is not from me, but I think it was due to this sentence: `In your case 'html' has opacity:0.5 so its child i.e 'h1' having opacity:1 won't do any difference.` But actually if you have an opacity 0.5 element inside another opacity 0.5 element, the effect will be 0.25 opacity, so there is a difference. Maybe you could edit that sentence... – gregn3 Aug 01 '16 at 09:30
Thanks @gregn3. I edited my sentence. – Hilario Goes Aug 01 '16 at 09:36
I think that's correct otherwise so I upvoted it. – gregn3 Aug 01 '16 at 09:40

score 0 · Answer 2 · answered Aug 01 '16 at 09:18

if you set the opacity of the parent to 0.5 , all the child elements will get that opacity. i suggest you use a transparent img as background instead OR you could give that background to a pseudo-element.

( i used background-color for example purposes but you can use background-image and opacity:0.5 instead. it still works the same )

html {




font-family: Garamond;
text-align: center;


position:relative;


}
html:before {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  margin:0 auto;
  background:rgba(0,0,0,0.5);
   
  content:"";
  z-index:-1;
}

h1 {

opacity: 1;
 }

 <p id ="topBar"></p>

    <h1>Heading</h1>

    <h3>Name</h3>

    <p> 
        Paragraph
    </p>

    <h3>Heading</h3>

    <p>More text</p>

    <h3>Send us an email!</h3>

    <form>
        <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
        <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
        <input type="submit" value ="Send" name="send">
    </form>

    <p id ="bottomBar"></p>

to clarify even further: setting the opacity to 0.5 on a parent div and 0.4 on a paragraph inside that div will result in a opacity of 0.5*0.4=0.2 on the child paragraph. — Andrei C, Aug 01 '16 at 09:28

score 0 · Answer 3 · answered Aug 01 '16 at 09:28

You can also apply background to body element instead of html. because all of the visible content is inside in the body tag

body{
 background:rgba(255,0,0,0.5);


font-family: Garamond;
text-align: center;

opacity: 0.5;

}
h1 {

opacity: 1;
}

 <p id ="topBar"></p>

    <h1>Heading</h1>

    <h3>Name</h3>

    <p> 
        Paragraph
    </p>

    <h3>Heading</h3>
 
    <p>More text</p>

    <h3>Send us an email!</h3>

    <form>
        <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
        <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
        <input type="submit" value ="Send" name="send">
    </form>

    <p id ="bottomBar"></p>

Relisora · Answer 4 · 2016-08-01T09:28:35.073

Opacity does not work in this particular case because it inherit from his parent and cant be overwritten.

I changed your background by background: rgba(0, 0, 0, .5); and then there is no need to change the opacity of the text anymore.

This is the most simple way of changing it, only using the opacity of the background.

JS fiddle here

html {

background: url(pen.jpg) no-repeat center fixed;
background-size: cover;


font-family: Garamond;
text-align: center;

background: rgba(0, 0, 0, .5);

}

<body>

    <p id ="topBar"></p>

    <h1>Heading</h1>

    <h3>Name</h3>

    <p> 
        Paragraph
    </p>

    <h3>Heading</h3>

    <p>More text</p>

    <h3>Send us an email!</h3>

    <form>
        <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
        <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
        <input type="submit" value ="Send" name="send">
    </form>

    <p id ="bottomBar"></p>
</body>

Why can't I change the opacity of h1 element back to 1 after changing opacity of html element to 0.5?

4 Answers4