I have some images in a div called main which has the opacity set to 82%

#main {
    background-color:#191919;
    width:800px;
    opacity:0.82;
    filter:alpha(opacity=82);
    }

These images however are also slightly transparant. I tried setting the opacity of the image to 100% but that didn't help. I have no idea what's causing this. The image is just a normal image with a src and alt so nothing fancy about that.

Also table (so probably also div) background colors are transparant.

Anyone who could help with this?

Recommended Answers

if it it regarding opacity,then you can use

#main {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

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

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

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

  /* Good browsers */
  opacity: 0.82;
}

As for background :rgba is concerned,not …

Jump to Post

All 2 Replies

I found a solution for Chrome/Firefox:

#main {
    width:800px;
    background: rgba(25, 25, 25, 0.82); 
}

But now on IE there's no background color at all, fully transparant.

if it it regarding opacity,then you can use

#main {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

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

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

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

  /* Good browsers */
  opacity: 0.82;
}

As for background :rgba is concerned,not all browsers support it.you should declare a "fallback" color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don't support it. This fallback does fail in some really old browsers.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.