Home >Web Front-end >CSS Tutorial >How to Blur a Parent DIV's Background Without Affecting Child Elements?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-11 03:58:10474browse

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>

With this approach, the content DIV remains unaffected while the background is blurred.

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn