用css掩蓋div

Question

這裏是我的小提琴：http://jsfiddle.net/4wd6vmjL/

我想掩蓋一個div來顯示我的圖像歪斜。但我不想讓圖像傾斜。

現在在蒙版和圖片之間存在空白，無法填充所有蒙版。

.mask{ 
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg'); 
    height:200px; 
     -webkit-transform: skew(-16deg); 
    -moz-transform: skew(16deg); 
    -o-transform: skew(16deg); 
    transform: skew(16deg); 
} 

有什麼建議嗎？謝謝

Answer 1

你需要改變你的css .mask類。

.wrapper{ 
 
    display: block; 
 
    height:200px; 
 
    background: #f8f8f8 none repeat scroll 0 0; 
 
    text-align: left; 
 
    -webkit-transform: skew(-16deg); 
 
    -moz-transform: skew(-16deg); 
 
    -o-transform: skew(-16deg); 
 
    transform: skew(-16deg); 
 
    border-right:medium none; 
 
    margin-bottom: 26px; 
 
    margin-left: 44px; 
 
    overflow: hidden; 
 
    z-index: 100; 
 
    width:300px; 
 
    
 
} 
 
.mask { 
 
    background-image: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg"); 
 
    background-position: center top; 
 
    height: 480px; 
 
    transform: skew(16deg); 
 
    width: 430px; 
 
    padding-left: 70px; 
 
}

<div class="wrapper"> 
 
    <div class="mask">asdassadd</div> 
 
</div>

Answer 2

只需添加圖像的另一個DIV內具有正好相反的counterskew它。最難的是現在定位你的div，這將需要一些調整 - 取決於你的內部div需要更大的角度。我也將它定位在包裝div的中心。

.mask { 
 
    position: relative; 
 
    left: 100px; 
 
    width: 200px; 
 
    height:200px; 
 
    overflow: hidden; 
 
    -webkit-transform: skew(-16deg); 
 
     -moz-transform: skew(-16deg); 
 
     -ms-transform: skew(-16deg); 
 
      transform: skew(-16deg); 
 
} 
 
.mask > * { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 370px; 
 
    height:370px; 
 
    color: #fff; 
 
    background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg'); 
 
    -webkit-transform: skew(16deg) translate(-50%,-50%); 
 
     -moz-transform: skew(16deg) translate(-50%,-50%); 
 
     -ms-transform: skew(16deg) translate(-50%,-50%); 
 
      transform: skew(16deg) translate(-50%,-50%); 
 
}

<div class="mask"><div>This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.</div></div>