HTML+CSS实现背景虚化的代码怎样写

来源：恒创科技编辑：恒创科技编辑部

2024-01-19 06:45:59

在日常操作或是项目的实际应用中，有不少朋友对于“HTML+CSS实现背景虚化的代码怎样写”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

_{把主要模块写出来，其他详细内容的代码就省略啦

HTML代码：
<div class="login-container">
//这个div就是背景图
<div class="beijing"></div>
//这个div就是显示的内容块，也就是我的logo和登录框
<div class="content"></div>
</div>
CSS代码：

.login-container{
position: relative;
width: 100%;
height:100%;
position: relative;
//利用flex布局让内容content模块垂直居中
display: flex;
flex-direction: column;
position: relative;
}
.beijing{ //背景图样式
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top:0px;
background: url('../../../static/img/timg (1).jpg');
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.content{ //内容图样式
width: 80%;
height: 70%;
position: absolute;
z-index: 5;
}
按照上面的html和css编写就可以实现你想要的背景图虚化效果喽！
总结

“HTML+CSS实现背景虚化的代码怎样写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注恒创科技网站，小编每天都会为大家更新不同的知识。}