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

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.