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

2024年12月09日 建站教程

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

本文链接:http://so.lmcjl.com/news/19260/

展开阅读全文
相关内容