CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉。
原图:
实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .banner_bg{ background:url(http://wl.aidezy.com/201911229534952007707.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 class="banner_box"> <div class="banner_bg"></div> <div class="banner swiper-container"> 这里面是清晰的内容 </div> </div> </body> </html>
资源均来自第三方,谨慎下载,前往第三方网站下载 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com 解压密码:www.xkwo.com