html - 固定背景的透明三 Angular 形

Question

当页面有固定背景滚动(不是视差)时，有没有办法在第二行实现一个三 Angular 形但让它透明以便显示固定背景？

即

-------------------------
this is fixed background


-----------   -----------
           \ /

second row solid colour
-------------------------

除了背景为固定图像背景的三 Angular 形外，第二行将具有纯色。有办法做到这一点吗？

Answer 1

演示:http://jsbin.com/tidir/1/

http://jsbin.com/tidir/1/edit

HTML

<section class="featurette"></section>

CSS:

body,html {background:#222;height:100%;padding:0;margin:0;}

.featurette {
    background: url(http://lorempixel.com/700/400/cats/);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    height:400px;
    position: relative;
    overflow:hidden;
}
.featurette:before,
.featurette:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 70px;
    margin: 0 0 0 -40px;
    transform: skew(40deg);
    background: #222;
}
.featurette:after {
    left: 50%;
    right: 0;
    margin: 0 -40px 0 0;
    transform: skew(-40deg);
}


.featurette:before {
    left: 0;
    right: 50%;
}

/* demo only */
body {height:2000px;}