<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .banner_bg{ background:url(https://www.ixiaojun.com/zb_users/upload/2021/04/202104171618589518314071.jpg); width:1000px; background-repeat:no-repeat; background-size:cover; -webkit-filter:blur(15px); -moz-filter:blur(15px); -o-filter:blur(15px); -ms-filter:blur(15px); filter:blur(15px); position:absolute; left:0; top:0; height: 500px; } .swiper-container{ position: relative; top:200px; left: 300px; color: white; font-size: 36px; font-weight: 700; text-shadow: 0 2px 20px rgba(0, 0, 0, .1); } </style> <body> <div> <div></div> <div class="banner swiper-container"> 这里面是清晰的内容 </div> </div> </body> </html>
效果对比
原图:
效果图: