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);
}