Member Avatar for brecht.carnewal

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?

Edited by brecht.carnewal
  • 2 Contributors
  • 2 Replies
  • 177 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by IIM

Dani AI

Generated

Short diagnosis: applying opacity to a container makes the whole element and every descendant render translucently. That explains why your images and table backgrounds looked washed out. was on the right track switching away from container opacity; also correctly pointed out the need for a fallback for browsers that don't understand RGBA.

A robust, cross‑browser pattern is to put the semi‑transparent background on a separate layer so child content stays fully opaque. Two common ways:

  • A CSS generated layer (no extra markup). The overlay sits behind content and carries the alpha, so images remain solid.
#main { position: relative; /* container */ }

/* generated background layer */
#main:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #191919;
  opacity: 0.82;            /* translucency only for the pseudo element */
  pointer-events: none;
  z-index: 1;
}

/* make page content sit above the overlay */
#main > * { position: relative; z-index: 2; }
  • If you must support very old IE builds that mishandle generated content or rgba, add a positioned child (an .overlay DIV) with a repeating semi‑transparent PNG as a fallback. That PNG approach gives predictable alpha in ancient browsers without touching the content elements.

Quick troubleshooting checklist:

  • Use devtools to inspect computed styles and confirm opacity is not set on an ancestor.
  • If IE shows no color, make sure a solid fallback color is declared before any RGBA declaration or provide the PNG overlay fallback.
  • Ensure a standards doctype (pseudo elements and some CSS behaviors require it).
  • Test by temporarily removing opacity declarations to confirm which rule is causing the transparency.

This keeps backgrounds visually translucent while leaving images and table cells fully opaque.

Recommended Answers

All 2 Replies

Member Avatar for brecht.carnewal

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.

Member Avatar for IIM

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.