How to set transparent background in HTML5 element

Question

I want to set the opacity of an element to 0. Now if i do this, all the content of the element will inherit this property. I don't want this, i just want the background to get the opacity 0 while the content (the text for example) stays visible

Any clues ?

Thanks.

You should then reference your pages better instead of mumbling duplicated three times. Stay professional and answer the question, not everybody got your knowledge, share it or move on !! — Debugger, Jun 07 '13 at 21:27

score 12 · Accepted Answer · edited Jun 07 '13 at 21:25

12

After some research I found an easy answer - background-color: transparent;

edited Jun 07 '13 at 21:25

Adrift

58,167
12
92
90

answered Jun 07 '13 at 20:32

Debugger

9,130
17
45
53

score 7 · Answer 2 · answered Jun 07 '13 at 20:29

7

Can you set the background color instead?

background-color: rgba(255,255,255,0.6);

answered Jun 07 '13 at 20:29

PerkinsB1024

181
9

laconbass · Answer 3 · 2013-06-07T20:29:39.980

The opacity property is applied across an entire object, as you can read on the specification for it.

The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

You can consider using rgba() colors.

How to set transparent background in HTML5 element

3 Answers3