＆＃39;层＆＃39;在HTML中，透明的部分

Question

我想要这个：http://gyazo.com/0fe69e349ed5cd4e72a08ed8e60af5d4
但我无法实现它。
我可以不更改图像。 我用图像作为面具，但这给了我这个：http://gyazo.com/b69e840d095212bce422252cec081fe9
有没有办法让侧面部件变白？

我的代码：

#section1{
    height:275px;
    width:100%;
    background-image: url('/img/paral1.jpg');
    background-position: center top;
    background-repeat:no-repeat;
    background-size: 100% 916px;
}
.overlay{
    position: absolute;
    margin-top:180px;
    height:100px;
    width:100%;
    overflow: hidden;

}
.mask{
    margin: 0 auto;
    background-image: url('/img/section1.png');
    height:100px;
    width:1080px;
    background-size:100% 100%;
}

编辑：JSfiddle：http://jsfiddle.net/31kxqmLt/
JS全屏显示：http://jsfiddle.net/31kxqmLt/embedded/result/
编辑编辑：掩码的宽度必须为1080px，其余部分应为白色。

Answer 1

我制作了你想要制作的形状的Html / css示例。

它使用背景图像，伪元素和skewX在左下角和右下角提供透明剪切效果。它也很敏感：

<强> DEMO

输出：

＆＃13;

＆＃13;

.wrap {
    width:100%;
    padding-bottom:30%;
    position:relative;
}
.wrap:before {
    content:'';
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
    background-size:100% auto;
    position:absolute;
    width:100%;
    left:0;
    height:50%;
}
.b{
    position:absolute;
    bottom:0;
    width:50%; height:50%;
}
.l{
    left:5%;
    transform-origin: 0 0;
    transform: skewX(45deg);
    overflow:hidden;
    border-bottom-left-radius:3%;
}
.r{
    right:5%;
    transform-origin: 100% 0;
    transform: skewX(-45deg);
    overflow:hidden;
    border-bottom-right-radius:3%;
}
.l:before, .r:before{
    content:'';
    display:block;
    width:100%; height:100%;
    background-size: 200%;
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
}
.l:before{
    background-position: 10% -100%;
    transform-origin: 0 0;
    transform: skewX(-45deg);
}
.r:before{
    background-position: 90% -100%;
    transform-origin: 100% 0;
    transform: skewX(45deg);
}
body {
    padding:20px 10%;
    background-image : url(http://i.imgur.com/k8BtMvj.jpg);
    background-size:cover;
}

＆＃13;

<div class="wrap">
    <div class="b l"></div>
    <div class="b r"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Js fiddle

全屏

Js fiddle

编辑了遮罩图像

将模板width设置为100%，使其适合所有分辨率

.mask{
    margin: 0 auto;
    background: url('http://s29.postimg.org/5g7z03ypz/image.png') no-repeat bottom;
    height:100px;
    width:100%;
    background-size:100% auto;
}

用于较小分辨率min-width 300

#section1{
    max-height:200px;
    min-height:30%;
    overflow:hidden;
    position:relative;
}

JS Fiddle