讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果：
以下为具体实现：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>背景虚化</title></head><body> <div class="main"><!-- 以下为背景虚化，其他内容清晰--><!-- 内容层--> <div class="banner"> <div class="banner-contain"> <h1>我是内容</h1> </div&关于爱情的经典句子gt;<!-- 背景层--> <div class="banner-bg"></div> </div> </div> <style> .main{ width: 100%; } .banner{ 正方形公式周长 width: 100%; position: relative; } .banner-bg{ width: 100%;/*宽度铺满屏幕*/ padding-top: 52.734%;/*图片高度除以宽度，得到此值*/ background: url("test.jpg")center center no-repeat;/*两个center分别为水平和垂直方向的对齐方式*/ background-size: 100%;/*背景水平铺满*/ filter:blur(10px);/*虚化值，越大越模糊*/ } .banner-contain{ position: absolute;/*设置内容层绝对定位*/ width: 100%; text-align: center; z-ind二元一次方程的解法ex: 6;/*将内容至于上层*/ margin-top: 6%; } </style></body></html>1.自适应的实现：
设置div标签padding-top为百分比，padding和margin百分比值是依据宽度计算的而非屏幕高度，所以可以依此设置一个自适应的区域，比如图片信息如下
那么高宽比例为：540/1024 大概为52.734%，也就是高度为宽度的52.734%，这里宽度设置为100%，那么宽度的padding-to学跳单人舞p即为52.734%*100%
2.背景虚化内容清晰的实现：
设置两个层，一个是背景虚化层，自适应撑起整个外层div容器，通过filter:blur()属性设置虚化值，另一个为内容层，绝对定位，设置z-index提高内容层层次防止被遮挡，这样内容层不受虚化影响
能力有限，水平一般，错误之处，欢迎指正野兽之灵出装，感谢关注和评论！
本文发布于:2023-04-03 17:19:56，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/35c60ca637c864b4ee4e53cec62e19f3.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：前端实现背景虚化但内容清晰且自适应.doc
本文 PDF 下载地址：前端实现背景虚化但内容清晰且自适应.pdf
| 留言与评论（共有 0 条评论） |
