css3实现模糊背景，内容清晰

沃梦达教程前端开发

2024-12-14


<!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实现模糊背景，内容清晰”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。

沃梦达教程

本文标题为：css3实现模糊背景，内容清晰