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/
JSfiddle 全屏：http://jsfiddle.net/31kxqmLt/embedded/result/
编辑编辑：蒙版的宽度必须为 1080 像素，其余空间应为白色。

Answer 1

我为您尝试制作的形状制作了这个 Html/css 示例。

它使用背景图片、伪元素和skewX来在左下角和右下角给出透明的切割效果。它也是响应式的：

DEMO

输出：

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

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

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