CSS3 legt eine Maske für das Hintergrundbild fest und löst das Problem der Maskenstilvererbung

   <Stil>
        .Elternteil{
            Hintergrund: URL('./test.jpg') keine Wiederholung Mitte;
            Filter: Unschärfe (3px)
        }
        .Sohn{
            Filter: Unschärfe(0);
            /*
            Das Setzen des gleichen Attributs in einem untergeordneten Tag kann den geerbten Stil nicht überschreiben*/
        }
    </Stil>

    <div Klasse="übergeordnet">
        <p class="son">Hallo</p>
    </div>

   <Stil>
        .Elternteil{
            Position: relativ;
            /*Lassen Sie das übergeordnete Tag relativ positioniert sein und lassen Sie .middle relativ positioniert sein*/
        }
        .Mitte{
            Hintergrund: URL('./test.jpg') keine Wiederholung Mitte;
            Filter: Unschärfe (3px);

            Position: absolut;
            Höhe: 100%;
            Breite: 100 %;
            
            z-Index: -1;
            /*Reduzieren Sie die Ebenenhöhe, um zu verhindern, dass andere Unterelemente abgedeckt werden*/
        }
        .Sohn{
        }
    </Stil>
    
    <div Klasse="übergeordnet">
        <div Klasse="Mitte"></div>
        <p class="son">Hallo</p>
    </div>