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

  • 📝教程
  • 2836 阅读
  • 2018年12月01日
  • 0 条评论
  • 全文共82字, 阅读大约需要1分钟
  • 搜索引擎已收录

首页 / 📝教程 / 正文

AI摘要
Gemini 1.5 Pro
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
反馈

[scode]CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉。[/scode]

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.banner_bg{
background:url(https://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>

VIA@AIDE

 赞  赏

如果觉得我的文章对你有用,请随意打赏

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开  或者  扫一扫,即可进行扫码赞赏哦

本文来自投稿,不代表本站立场,如若转载,请注明出处。
本文最后更新于2020年09月14日18时14分02秒,已超过1546天没有更新,若内容或图片失效,请留言反馈
本文链接:https://niepan.org/archives/2084.html(转载时请注明本文出处及文章链接)
作品采用:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表评论

博主 - <?php $this->author->screenName(); ?>

love2wind

记录生活,分享世界