68 lines
1.5 KiB
HTML
68 lines
1.5 KiB
HTML
<!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> |