Lassen Sie uns über die Grundlagen sprechen, ohne zu ausführlich zu werden. Manchmal muss das Frontend den Hintergrund verwischen, aber es ist ein klarer Inhalt erforderlich.
Das Folgende ist die spezifische Implementierung:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Hintergrundunschärfe</title></head><body> <div class=main><!-- Folgendes Der Hintergrund ist unscharf und andere Inhalte sind klar erkennbar--><!-- Inhaltsebene--> <div class=banner> <div class=banner-contain> <h1>Ich bin der Inhalt</h1> </div> <! Hintergrundebene --> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100% } .banner{ width: 100%; .banner-bg{ width: 100 %;/*Die Breite füllt den Bildschirm aus*/ padding-top: 52,734 %;/*Die Bildhöhe wird durch die Breite geteilt, um diesen Wert zu erhalten*/ Hintergrund: url(test.jpg)center center no-repeat;/*Die beiden Zentren sind horizontal bzw. vertikal ausgerichtet*/ background-size: 100%;/*Der Hintergrund ist horizontal verteilt*/ filter:blur(10px); Unschärfewert, je größer er ist, desto unschärfer ist er.*/ } .banner-contain{ position: absolute;/*Legen Sie die absolute Positionierung der Inhaltsebene fest*/ width: 100%; : 6;/*Inhalt nach oben bringen*/ margin-top: 6% } </style></body></html> 1. Adaptive Implementierung:Stellen Sie den Abstands- und Randprozentsatz des div-Tags auf einen Prozentsatz ein, der auf der Grundlage der Breite und nicht der Bildschirmhöhe berechnet wird, sodass Sie beispielsweise einen adaptiven Bereich festlegen können folgt
Dann beträgt das Verhältnis von Höhe zu Breite: 540/1024, was etwa 52,734 % entspricht, das heißt, die Höhe beträgt padding-top % der Breite 52,734 %*100 %
Richten Sie zwei Ebenen ein, eine ist die Hintergrundunschärfeebene, unterstützt adaptiv den gesamten äußeren Div-Container, legt den Unschärfewert über filter:blur() fest, die andere ist die Inhaltsebene, absolute Positionierung, legen Sie den Z-Index fest, um ihn zu erhöhen Inhaltsebene Es wird verhindert, dass Ebenen blockiert werden, sodass die Inhaltsebene nicht durch Unschärfe beeinträchtigt wird
Das Obige ist der Beispielcode, den Ihnen der Editor im Frontend vorstellt, um eine Hintergrundunschärfe zu erzielen, aber mit klarem und anpassungsfähigem Inhalt. Wenn Sie Fragen haben, hinterlassen Sie mir und dem Editor bitte eine Nachricht Ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!