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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
