How to Blur a Parent DIV's Background Without Affecting Child Elements?

Blurring DIV Background without Affecting Child Elements (Avoid Absolute Positioning)

When applying the blur or opacity effect to a parent DIV element, it affects the child elements as well. To avoid this, a creative solution is required.

Alternative Solution

Create two child DIVs within the parent container:

• Background DIV: Positioned absolutely within the parent (top:0px; right:0px; bottom:0px; left:0px; or 100% width/height)
• Content DIV: Positioned within the background DIV and containing the text or other elements

Code Example

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div><p>With this approach, the content DIV remains unaffected while the background is blurred.</p></div>

The above is the detailed content of How to Blur a Parent DIV's Background Without Affecting Child Elements?. For more information, please follow other related articles on the PHP Chinese website!