How to Prevent Child Elements from Inheriting a Parent's CSS Blur Effect?

CSS Blur Issue: Excluding Child Elements from Parent's Blur Effect

When applying a blur filter to a parent element using CSS, it's unavoidable that child elements also inherit the effect. However, there's a solution to exempt child elements from this blurriness without using absolute positioning.

To achieve this, create two nested divs within the parent div: one for the background and another for the content. Assign "position:relative" to the parent div and "position:absolute; top:0px; right:0px; bottom:0px; left:0px;" (or set height/width to 100%) to the background div. This ensures that the background div entirely covers the parent div.

By separating the background element from the content element, the blur filter applied to the background div will not affect the child element containing the text or other desired content.

Here's an 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;
}

<div></div>

The above is the detailed content of How to Prevent Child Elements from Inheriting a Parent's CSS Blur Effect?. For more information, please follow other related articles on the PHP Chinese website!