AIDE技术官网
AIDEZY.COM

CSS实现页面背景图片模糊内容不模糊的方法

AIDE技术网-aidezy.com AIDE技术网-aidezy.com AIDE技术网-aidezy.com
CSS实现页面背景图片模糊内容不模糊的方法

CSS实现页面背景图片模糊内容不模糊的方法

CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个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>

搜一下

赞(0) 打赏
AIDE技术网-aidezy.com 广告
AIDE技术网-aidezy.com 广告

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册