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

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

首页 / 📝教程 / 正文

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

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

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <style type="text/css">
  8. .banner_bg{
  9. background:url(https://wl.aidezy.com/201911229534952007707.jpg);
  10. width:1000px;
  11. background-repeat:no-repeat;
  12. background-size:cover;
  13. -webkit-filter:blur(15px);
  14. -moz-filter:blur(15px);
  15. -o-filter:blur(15px);
  16. -ms-filter:blur(15px);
  17. filter:blur(15px);
  18. position:absolute;
  19. left:0;
  20. top:0;
  21. height: 500px;
  22. }
  23. .swiper-container{
  24. position: relative;
  25. top:200px;
  26. left: 300px;
  27. color: white;
  28. font-size: 36px;
  29. font-weight: 700;
  30. text-shadow: 0 2px 20px rgba(0, 0, 0, .1);
  31. }
  32. </style>
  33. <body>
  34. <div class="banner_box">
  35. <div class="banner_bg"></div>
  36. <div class="banner swiper-container">
  37. 这里面是清晰的内容
  38. </div>
  39. </div>
  40. </body>
  41. </html>
复制代码

VIA@AIDE

 赞  赏

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

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

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

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

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

发表评论

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

love2wind

记录生活,分享世界