css模糊遮罩效果_CSS3 使用filter和伪元素构建响应式的模糊遮罩层

CSS

语言：

CSSSCSS

确定

html,

body,

.container {

width: 100%;

height: 100%;

margin: 0;

}

.container,

.overlay:before {

background: url(/assets/landing.jpg) no-repeat fixed 0 0/cover;

}

.container {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.overlay {

max-height: 200px;

margin: 0 auto;

max-width: 768px;

padding: 50px;

position: relative;

color: white;

font-family: 'Lato';

position: relative;

text-align: center;

z-index: 0;

}

.overlay:before {

content: '';

-webkit-filter: blur(100px);

filter: blur(100px);

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

z-index: -1;

}