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

发布时间：2023-10-06 10:00:13 所属栏目：语言来源：

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

在日常操作或是项目的实际应用中，有不少朋友对于“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;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!