I am working on a web project and I would like to apply a filter effect, such as background blur or brightness adjustment, to the background of a specific section. However, I want the text within this section to remain unaffected by these filter effects.
The issue I'm encountering is that the filter property is being applied to both the background and the text, whereas I only want the background to be blurred (or have its brightness adjusted) without affecting the text at all.
Here is my HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Document</title></head><body><div class="main"><div class="container"><div class="item"><h1>0</h1></div></div></div></body></html>Here is my css
.main { display: flex; justify-content: center; filter: blur(2px);}.container { display: flex; justify-content: center; background-image: url(images/people1.jpg); width: 600px; height: 400px;}.item { color: red; font-size: 50px;}