Wie kann man das Hintergrundbild eines Elements in CSS verwischen und gleichzeitig den Inhalt scharf halten?

Hintergrundbild in CSS verwischen, ohne den Inhalt zu beeinträchtigen

In CSS kann es vorkommen, dass Sie das Hintergrundbild eines verwischen möchten Element ohne Auswirkungen auf den darin enthaltenen Inhalt. So können Sie dies erreichen:

Die Lösung besteht darin, ein Pseudoelement (:before) zu erstellen, das das Hintergrundbild des übergeordneten Elements erbt. Dieses Pseudoelement wird dann absolut positioniert und mit einem Unschärfefilter versehen. Indem Sie seinen Z-Index auf -1 setzen, erscheint er hinter dem Inhalt.

Um dies zu implementieren, wenden Sie das folgende CSS an:

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}

.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}</code>

Sie können dann JavaScript verwenden, um eine Klasse umzuschalten ( B. „blur-bgimage“), das dieses CSS auf das gewünschte Element anwendet und das Hintergrundbild nach Bedarf verwischt oder die Unschärfe aufhebt.

Das obige ist der detaillierte Inhalt vonWie kann man das Hintergrundbild eines Elements in CSS verwischen und gleichzeitig den Inhalt scharf halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!