css设置左侧面板,CSS3 磨砂玻璃的侧面板（边栏浮层）

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

box-sizing: border-box;

}

body {

margin: 0;

font-family: 'Lato', sans-serif;

line-height: 1.4;

}

a {

color: currentColor;

}

h1 {

margin-bottom: 0;

}

.section {

position: relative;

height: 100vh;

background: url(/uploads/161001/normal1.jpg);

background-size: cover;

}

.section:before {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

padding-left: 50%;

background: url(/uploads/161001/normal1.jpg);

-webkit-filter: blur(8px);

filter: blur(8px);

background-size: cover;

background-clip: content-box;

}

.section-caption {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

position: relative;

z-index: 1;

width: 50%;

height: 100%;

margin: 0 0 0 auto;

padding: 2%;

background: rgba(255, 255, 255, 0.2);

color: white;

box-shadow: -1px 0 2px 2px rgba(0, 0, 0, 0.2);

}