CSS
语言：
CSSSCSS
确定
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-image: url(/uploads/160301/s1.jpg);
background-attachment: fixed;
}
section {
height: 100vh;
background-color: hsla(0, 75%, 50%, .4);
transform-origin: 0% 0%;
background-attachment: fixed;
}
section:nth-child(1) {
transform: skew(0, -10deg);
background-image: linear-gradient( hsla(0, 75%, 50%, .4), hsla(0, 100%, 50%, .6)), url(/uploads/160301/s1.jpg);
}
section:nth-child(2) {
transform-origin: 100% 0%;
transform: skew(0, 10deg);
background-color: hsla(110, 75%, 50%, .4);
background-image: linear-gradient( hsla(110, 75%, 50%, .4), hsla(110, 100%, 50%, .6)), url(/uploads/160301/s1.jpg);
}
section:nth-child(3) {
transform: skew(0, -10deg);
background-color: hsla(45, 75%, 50%, .4);
background-image: linear-gradient( hsla(45, 75%, 50%, .4), hsla(45, 100%, 50%, .6)), url(/uploads/160301/s1.jpg);
}
section:nth-child(4) {
transform-origin: 100% 0%;
transform: skew(0, 10deg);
background-color: hsla(210, 75%, 50%, .4);
background-image: linear-gradient( hsla(210, 75%, 50%, .4), hsla(210, 100%, 50%, .6)), url(/uploads/160301/s1.jpg);
}
