科技常识：前端实现背景虚化但内容清晰且自适应的实例代码_新闻中心

福建绿植源生化科技有限公司

普通会员

科技常识：前端实现背景虚化但内容清晰且自适应的实例代码

2023-05-2511

今天小编跟大家讲解下有关前端实现背景虚化但内容清晰且自适应的实例代码，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端实现背景虚化但内容清晰且自适应的实例代码的相关资料，希望小伙伴们看了有所帮助。

讲干货，不拢惺焙蚯岸嘶嵊龅奖尘靶榛竽谌萸逦男枨螅瓤葱Ч

以下为具体实现：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景虚化</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%; } .banner{ width: 100%; position: relative; } .banner-bg{ width: 100%; padding-top: 52.734%; background: url("test.jpg")center center no-repeat; background-size: 100%; filter:blur(10px); } .banner-contain{ position: absolute; width: 100%; text-align: center; z-index: 6; margin-top: 6%; } </style></body></html>

1.自适应的实现：

设置div标签padding-top为百分比，padding和margin百分比值是依据宽度计算的而非屏幕高度，所以可以依此设置一个自适应的区域，比如图片信息如下

那么高宽比例为：540/1024 大概为52.734%，也就是高度为宽度的52.734%，这里宽度设置为100%，那么宽度的padding-top即为52.734%*100%

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

设置两个层，一个是背景虚化层，自适应撑起整个外层div容器，通过filter:blur()属性设置虚化值，另一个为内容层，绝对定位，设置z-index提高内容层层次防止被遮挡，这样内容层不受虚化影响

总结

以上所述是小编给大家介绍的前端实现背景虚化但内容清晰且自适应的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：爱蒂网