'圖層'在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/
編輯編輯：面具必須有1080px的寬度和空間的其餘部分應該是白色的。

Answer 1

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

Answer 2

我讓你正試圖使形狀的這個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>