简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie eine einfache Hintergrundunschärfe mithilfe von CSS (Codebeispiel)

So implementieren Sie eine einfache Hintergrundunschärfe mithilfe von CSS (Codebeispiel)

青灯夜游
青灯夜游nach vorne
2018-10-25 16:16:112587Durchsuche

In diesem Artikel erfahren Sie, wie Sie mit CSS eine einfache Hintergrundunschärfe realisieren (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Verwenden Sie das Filterattribut, um den Unschärfewert festzulegen

Effekt:

CSS-Stil: 

<style type="text/css">
        .cover {
            width: 600px;
            height: 300px;
            position: relative;
            text-align: center;
            line-height: 300px;
            color: #fff;
            margin: 20px auto;
        }
        
        .cover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 300px;
            background: transparent url(Images/picture/5.jpg) center center no-repeat;
            filter: blur(8px);
            z-index: -1;
            background-size: cover;
        }
    </style>

HTML-Struktur: 

<body>
    <p class="cover">
        <h2>背景模糊，文字清晰显示</h2>
    </p>
</body>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Hintergrundunschärfe mithilfe von CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Das Schöne an der kombinierten Verwendung von display:table und display:table-cell in CSSNächster Artikel：Das Schöne an der kombinierten Verwendung von display:table und display:table-cell in CSS

In Verbindung stehende Artikel

Mehr sehen