Home > Article > Web Front-end > How to implement simple background blur using css (code example)
How to implement simple background blur using css (code example)
- 青灯夜游forward
- 2018-10-25 16:16:112535browse
The content of this article is to introduce the method of realizing simple background blur using CSS (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Use the filter attribute to set the blur value
Effect:
css style:
<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 structure:
<body>
<p class="cover">
<h2>背景模糊，文字清晰显示</h2>
</p>
</body>The above is the detailed content of How to implement simple background blur using css (code example). For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete