How to Blur a Parent Div's Background Without Affecting Child Elements Using Only CSS?

How to Blur a Parent Div Without Affecting Child Elements (CSS-Only Solution)

When applying CSS filters like blur or opacity to a parent div, child elements within it may also be affected. To solve this issue without using absolute positioning, consider the following solution:

Create Separate Divs for Background and Content:

1. Create two divs within the parent div: one for the background image and another for the content.
2. Assign position: relative to the parent div.

Position Background Div Absolutely:

1. Assign position: absolute; top: 0; right: 0; bottom: 0; left: 0; to the div intended for the background image.
2. This ensures that the background div covers the entire parent div.

Add Blur to Background Div:

1. Apply the filter: blur() property to the background div.
2. Set the z-index to a negative value (-1, for example) to place it behind the content div.

Example:

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

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

<div>

By using this method, the background image can be blurred without affecting the child div containing the content.

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