Heim >Web-Frontend >CSS-Tutorial >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:112633Durchsuche

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