p {
margin: 0;
}
第一种:
.wrap {
position: relative;
width: 100vw;
height: 100vh;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.wrap:after {
position: absolute;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.wrap .content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 11;
}
<div class="wrap">
<div class="content">
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
</div>
</div>
第二种:
.wrap_01 {
width: 100%;
height: 100%;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
}
.wrap_01 .content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 40%;
height: 110vh;
padding: 20px;
margin: 0 auto;
text-align: center;
z-index: 1;
}
.wrap_01 .bg {
position: absolute;
width: 500%;
height: 100%;
margin-left: -150%;
top: -10px;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
filter: blur(5px);
z-index: -1;
}
<div class="wrap_01">
<div class="content">
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<div class="bg"></div>
</div>
</div>
第三种:
.wrap_02 {
width: 100%;
height: 100%;
padding: 1px;
box-sizing: border-box;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
z-index: 1;
}
.wrap_02:after {
position: absolute;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.wrap_02 .content {
position: absolute;
left: 40%;
top: 30%;
/* transform: translate(-50%, -50%); */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 200px;
height: 200px;
text-align: center;
background: inherit;
z-index: 11;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.5);
}
<div class="wrap_02">
<div class="content">
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
</div>
</div>
第四种:
.wrap_03 {
width: 100%;
height: 100%;
padding: 1px;
box-sizing: border-box;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
z-index: 1;
}
.wrap_03 .content {
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
background: inherit;
}
.wrap_03 .content:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(15px); /*为了模糊更明显,调高模糊度*/
z-index: 2;
}
.wrap_03 .content-inner {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
text-align: center;
z-index: 11;
}
<div class="wrap_03">
<div class="content">
<div class="content-inner">
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
</div>
</div>
</div>
第五种:
.wrap_04 {
position: relative;
width: 100vw;
height: 100vh;
padding: 1px;
box-sizing: border-box;
background: url('./img/img_01.jpeg') no-repeat center center fixed;
z-index: 1;
}
.wrap_04:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(15px); /*为了模糊更明显,调高模糊度*/
z-index: 2;
}
.wrap_04 .content {
position: absolute;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 300px;
height: 300px;
margin-right: auto;
margin-left: -150px;
margin-top: 10%;
border: 1px solid rgba(183, 183, 183, 0.47);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 4;
}
<div class="wrap_04">
<div class="content">
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
<p>Bom Bom Bom ~~~~~~~~~~</p>
</div>
</div>