Member Avatar for ravi142

I want to transparent DIV box.meance back content of page also see when i am in box.
I have search but most of said Background color set with img.but i have not to do.

Give me your suggestion

Thank you.

  • 3 Contributors
  • 4 Replies
  • 104 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by ravi142

Dani AI

Generated

Brief note tied to this thread: and asked for code and reported a working legacy fix—below is a modern, simple pattern that keeps the page visible behind a modal while keeping the modal content fully readable. It avoids images and avoids setting the element-wide opacity (which fades children). Use an alpha channel in the background color for the dimmer/overlay or the panel itself.

/* full-screen overlay (dims page but not modal content) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* centered popup panel */
.popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  z-index: 1000;
}

Why this works: using an RGBA or HSLA background gives a translucent color without affecting child elements; the opacity property applies to the whole element including descendants (see MDN: opacity and MDN: color() functions including rgba()). Use position: fixed and an appropriate z-index so the overlay covers the page and the popup sits above it. If clicks should pass through the overlay, consider pointer-events; if the overlay should close the modal on click, ensure it intercepts clicks.

Accessibility and extras: mark the panel with role="dialog"/aria-modal="true", trap focus inside the modal, and add keyboard handling (Esc to close). For a blurred background effect, modern browsers support backdrop-filter (see MDN: backdrop-filter), but support varies, so provide a solid fallback.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Can you clarify the problem you are having and/or post the relevant code?

A div has a transparent background by default. I dont understand what you are asking or trying to accomplish.

Member Avatar for ravi142

I try my best..
I have one DIV with POP box that Color is:sky blue.
In background i have my Home page.
When I am in Div POP box also see background content of Home page.

Member Avatar for Aleksenator

Ravi, can you post your code here.

Member Avatar for ravi142

@All firends: i find solution using "filter:alpha(opacity=40);"

Thank you for support me.

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.