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:112602Durchsuche
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