最近有写页面的时候,有一个需求,就是给页面一个背景,但是有一个要求,就是这个背景要有一个背景虚化的效果。
实现方式:css样式
核心的思路就是在有背景的div的下面再加一层和它等大的div,给这个div一个白背景,然后这个div透明
对应的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
background-image: url('../../image/login-img/bgimg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-blur {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, .5);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="bg-blur">
</div>
</div>
</body>
</html>
背景虚化前的页面
背景虚化后的页面