html背景毛玻璃效果代码,CSS3 模糊背景 背景遮挡 毛玻璃特效

CSS

语言：

CSSSCSS

确定

body {

background: black;

background-image: url("/uploads/160401/normal.jpg");

background-repeat: no-repeat;

background-size: cover;

background-attachment: fixed;

font-family: Raleway, Open Sans, Droid Sans, Roboto, arial, sans-serif;

}

.blurred-bg {

background-image: url("/uploads/160401/blur.jpg");

background-repeat: no-repeat;

-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;

background-size: cover;

background-attachment: fixed;

}

.blurred-bg.tinted {

background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("/uploads/160401/blur.jpg");

background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("/uploads/160401/blur.jpg");

background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("/uploads/160401/blur.jpg");

}

.blurred-bg.shaded {

background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/uploads/160401/blur.jpg");

background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/uploads/160401/blur.jpg");

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/uploads/160401/blur.jpg");

}

.box {

width: 500px;

height: 300px;

left: -webkit-calc(50% - 250px);

top: 20%;

position: absolute;

border-radius: 5px;

-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

border: 1px solid rgba(255, 255, 255, 0.3);

padding: 20px;

text-align: center;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

}

.box:active {

cursor: move;

}

h1,

h2,

a,

p {

color: white;

font-weight: 100;

}

.tinted h1,

.tinted h2,

.tinted a,

.tinted p {

color: black;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);

}

h2 {

font-size: 14px;

}

p {

margin: 20px;

}