html中背景条纹效果,CSS3 页面滚动交叉斜条纹背景效果

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

}