网页设计背景虚化,html背景虚化代码

　　讲讲干货，不要啰嗦，有时候前端会遇到背景模糊但内容清晰的需求。先看效果：

　　对于具体实现：

　　！doctype HTML HTML lang= en headmethacharaset= UTF-8 title background blur/title/head body div class= main ！-以下是背景虚化，其他内容清晰-！-内容层-div class= banner div class= banner-contain H1我是内容/h1 /div！-背景层-div class= banner-BG /div/div/div style . main { width:100%；} .横幅{宽度：100%；位置：相对；} .横幅-背景{宽度：100%；/*宽度覆盖屏幕*/padding-top:52.734%；/*图片的高度除以宽度得到这个值*/background:URL( test . jpg )center center no-repeat；/*两个中心分别水平和垂直对齐*/background-size:100%；/*背景被水平覆盖*/滤镜：模糊(10px)；/*模糊值，模糊越大*/}。横幅-包含{ position:absolute；/*设置内容层的绝对定位*/宽度：100%；文本对齐：居中；z指数：6；/*把内容放到上层*/margin-top:6%；} /style/body/html1.自适应的实现：

　　将div标记padding-top设置为百分比，填充和边距百分比值是根据宽度而不是屏幕高度计算的，因此您可以相应地设置一个自适应区域。例如，图片信息如下

　　那么长宽比就是540/1024，大概是52.734%，也就是高度是宽度的52.734%，其中宽度设置为100%，宽度的padding-top是52.734%*100%。

　　2.背景虚化内容清晰的实现：

　　设置两层，一层是背景模糊层，自适应支持整个外div容器。模糊值由filter:blur()属性设置，另一个是内容层，绝对定位。设置z-index是为了提高内容层的级别以防止其被遮挡，从而使内容层不受模糊的影响。

　　总结

　　以上是边肖给大家介绍的实现背景虚化的前端示例代码，但内容清晰，适应性强。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

　　如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。