web前端开发中如何实现背景虚化但内容清晰且自适应

tangjin

作者

小编给大家分享一下web前端开发中如何实现背景虚化但内容清晰且自适应，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

先看效果：

以下为具体实现：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>背景虚化</title>
</head>
<body>
<divclass="main">
<!--以下为背景虚化，其他内容清晰-->
<!--内容层-->
<divclass="banner">
<divclass="banner-contain">
<h2>我是内容</h2>
</div>
<!--背景层-->
<divclass="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")centercenterno-repeat;/*两个center分别为水平和垂直方向的对齐方式*/
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百分比值是依据宽度计算的而非屏幕高度，所以可以依此设置一个自适应的区域，比如图片信息如下