How to make OPACITY only on one Item in CSS / HTML

Question

Problem: After I enter opacity:0.5(or whatever) It applies on all objects that is in header. How can I solve it? Entering opacity:1 in header h1,h2 does not help.

Here is the jsfiddle link: http://jsfiddle.net/unyfmf3d/

Here is the css code:

body {
    background: #E6E6E6;
    color: black;
}

.header {
    opacity:0.2;
    margin:0px auto;
    width:700px;
    height:150px;
    background: white;
}

#header h1 {
    opacity:1;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    margin:0px;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height:20px;
    letter-spacing:-2px;
    font-weight:bold;
}

#header h2 {
    opacity:1;
    font-family: Gill Sans, Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:2px;
    font-weight: bold;
}

score 1 · Answer 1 · answered Nov 24 '15 at 13:13

The opacity makes the whole div (with content) more transparent.

If you want to only make the background transparent, you can do this:

.header {
    margin:0px auto;
    width:700px;
    height:150px;
    background-color: white; /*Obligatory fallback color, if the browser doesn't support rgba*/
    background-color:rgba(255, 255, 255, 0.2);
}

The rgba means Red, Green, Blue, Alpha, and therefore you will need to write the color as RGB-format, whit the alpha being your opacity.

score 1 · Answer 2 · answered Nov 24 '15 at 13:15

1

Opacity is inherited by children. You could remove the opacity and instead use background:rgba(255,255,255,0.2) which should do what you are looking for.

answered Nov 24 '15 at 13:15

Lee

2,993
3
21
27

score 0 · Answer 3 · answered Nov 24 '15 at 13:13

0

try this way

.header {
   margin:0px auto;
   width:700px;
   height:150px;
   background: rgba(255, 255, 255, 0.2);
 }

answered Nov 24 '15 at 13:13

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 4 · answered Nov 24 '15 at 13:14

0

If you're just looking to make the background colour transparent use background:rgba(255,255,255,0.2); and remove opacity:0.2. The opacity code will affect the entire block.

RGBA stands for Red, Green, Blue, Alpha (or transparency).

JS Fiddle link - http://jsfiddle.net/lustre/z0xmfsry/1/

answered Nov 24 '15 at 13:14

Natalie

546
10
21

Works fine. Thank you very much. – demboz11 Nov 24 '15 at 13:20
One more question. What if I would like to do image background would it look like `background-image(url....)` and then `background:rgba(255,255,255,0.2);` would the Image become transparent? – demboz11 Nov 24 '15 at 13:21

score 0 · Answer 5 · answered Nov 24 '15 at 13:14

0

Unfortunately it is not possible, as the opacity setting on the header will affect all children, even though technically they are already at 1.0.

I would use transparency on the header's background, like so;

.header {
    margin:0px auto;
    width:700px;
    height:150px;
    background: rgba(255,255,255,0.2);
}

answered Nov 24 '15 at 13:14

NoChecksum

1,206
1
14
31

One more question. What if I would like to do image background would it look like `background-image(url....)` and then `background:rgba(255,255,255,0.2);` would the Image become transparent? – demboz11 Nov 24 '15 at 13:22

n-dru · Answer 6 · 2015-11-24T13:26:05.387

0

Because of inheritance, you need to take the h elements out of the flow, that is out of the #header div to make those h elements overlap the div:

https://jsfiddle.net/unyfmf3d/3/

Then you can adjust their position by top property.

Here's a nice explanation of this issue:

https://css-tricks.com/non-transparent-elements-inside-transparent-elements/

edited Nov 24 '15 at 13:26

answered Nov 24 '15 at 13:21

n-dru

9,285
2
29
42

How to make OPACITY only on one Item in CSS / HTML

6 Answers6