css3实现模糊背景，内容清晰 - web建站教程手机端

<!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>

标签： css

上面是“css3实现模糊背景，内容清晰”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2203.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！