CSS make the background color transparent

Question

i wanted to make the gray bgcolor have transparency. but instead its contents became transparent instead of the bgcolor.

body {
   background-color: gray;
   /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on — Banana, May 24 '14 at 12:40

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

Set background-color to rgba(red, green, blue, alpha) where red, green and blue are between 0 and 255 and alpha is between 0 and 1, with 0 being fully transparent and 1 fully opaque.

Also take a look at: How do I give text or an image a transparent background using CSS?.

edited May 23 '17 at 10:27

Community

1
1

answered May 24 '14 at 12:41

Winestone

1,500
9
19

Made a quick website, we shall see: browsershots.org/http://testnaman.neocities.org/quicktest.html. EDIT: Seems to work pretty well. (The above link will only work until ~11:10pm EST 24/5/2014) – Winestone May 24 '14 at 13:00

score 0 · Answer 2 · answered May 24 '14 at 12:41

0

If you're not hugely concerned with older browser compatibility then you can use the new CSS3 rgba colour definition:

background-color: rgba(0, 0, 0, 0.5);

This will set a transparent background colour for your element.

answered May 24 '14 at 12:41

Kinnectus

899
6
14

CSS make the background color transparent

2 Answers2