You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.5 KiB
68 lines
1.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
/*.container {*/
|
|
/* text-align: center;*/
|
|
/* display: flex;*/
|
|
/* align-items: center;*/
|
|
/* justify-content: space-around;*/
|
|
/* padding-bottom: 20px;*/
|
|
/* color: white;*/
|
|
/* font-size: 50px;*/
|
|
/* position: relative;*/
|
|
/*}*/
|
|
.bur {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: url('../src/view/Home/bg0.jpg')center / cover no-repeat;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.method3-bur2-1 {
|
|
/* 因为设置了父元素设置了 display：flex 属性，这里必须设置长宽来刚好遮罩住 */
|
|
width: 400px;
|
|
height: 400px;
|
|
/* 关键属性 */
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.main{
|
|
width: 500px;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
}
|
|
.son{
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: url('../src/view/Home/bg0.jpg') center / cover no-repeat;
|
|
filter: blur(5px);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class='container'>
|
|
<div class='bur method3-bur2'>
|
|
<div class='method3-bur2-1'>
|
|
<span>这是文字</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="main">
|
|
<div class="son">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |