毛玻璃效果 php,css实现毛玻璃效果

css实现毛玻璃效果，效果图

1，html代码

this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass,this is FrostedGlass

2，css

* {

box-sizing: border-box;

}

.mainHolder {

width: 100%;

height: 100%;

background-image: url(1.jpg);

background-attachment: fixed;

background-position: center;

background-size: cover;

position: relative;

}

.textHolder {

width: 400px;

height: 600px;

position: absolute;

left: 33%;

top: 20%;

background: inherit;

overflow: hidden;

}

.textHolder::before {

content: '';

position: absolute;

top:0;

right: 0;

bottom: 0;

left: 0;

background: inherit;

background-attachment: fixed;

filter: blur(4px);

}

.textHolder::after {

content: "";

position: absolute;

top:0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0, 0, 0, 0.25);

}

p {

z-index: 1;

color: white;

position: relative;

margin: 0;

}