CSS实现页面背景图片模糊内容不模糊的方法
原图:
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.banner_bg {
background: url(https://cdn.jsdelivr.net/gh/july-wind/img2/img2webpage.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: 380px;
color: white;
font-size: 36px;
font-weight: 700;
text-shadow: 0 2px 20px rgba(0, 0, 0, .1);
}
</style>
</head>
<body>
<div class="banner_box">
<div class="banner_bg"></div>
<div class="banner swiper-container">
不模糊的内容
</div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
