How to Blur a Parent Div Without Blurring Child Elements?

How to Avoid Blurring Child Elements When Blurring Parent Div (Without Absolute Positioning)

Blurring a parent div using CSS filters like blur can undesirably blur child elements as well. However, there's a solution to isolate the blur effect to only the parent div without resorting to absolute positioning.

Create Inner Elements

Divide the parent div into two inner elements:

• background: Responsible for the blurred background
• content: Contains the unblurred elements

Positioning Elements

Apply the following styles:

• #parent_div: Set position: relative to allow absolute positioning of the inner elements.
• #background: Use position: absolute; top: 0; right: 0; bottom: 0; left: 0; (or height/width: 100%) to position it precisely over the parent div.
• #content: Maintain its default position: static.

Applying Blur

Apply the filter: blur(3px) or -webkit-filter: blur(3px) to #background, rather than #parent_div. This ensures that the blur effect is limited to the background element, leaving the content element sharp and unaffected.

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 {
  /* No special positioning required */
}

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