<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.content {
color:#ffffff;
font-size:40px;
}
.bg {
background:url('图片.jpg');
height:600px;
text-align:center;
line-height:600px;
}
.blur {
float:left;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
//模糊
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
-o-filter:blur(15px);
-ms-filter:blur(15px);
filter:blur(15px);
}
.front {
position:absolute;
left:10px;
right:10px;
height:600px;
line-height:600px;
text-align:center;
}
</style>
</head>
<body>
<p>
<p class="bg blur"></p>
<p class="content front">我模糊，我骄傲！</p></p>
</p>
</body>
</html>
以上是编程学习网小编为您介绍的“css3实现模糊背景，内容清晰”的全面内容，想了解更多关于
前端知识 内容，请继续关注编程基础学习网。
