使用css裁剪圖像

我想從圖像頂部裁剪50像素。我遵循下面的參考，但由於某種原因，它不能在FF中工作，但在Chrome中工作。使用css裁剪圖像

https://css-tricks.com/clipping-masking-css/

HTML：

<img src="https://s30.postimg.org/lkqxmrk29/about.jpg" class="rectshape">

演示：https://jsfiddle.net/squidraj/a4j343hg/1/

任何幫助，高度讚賞。

來源

2017-01-19 Prithviraj Mitra

撥弄工作！問題是什麼？ –

這對我很好！也許你正在使用不支持剪輯屬性的瀏覽器？ – mariobros

它看起來在jsfiddle上工作。 – Mehmet

由於剪輯路徑是not supported very well，爲什麼不使用overflow: hidden和一個容器元素？這是你的updated JSFiddle展示這一點。可以使用負邊距來隱藏圖像的一部分。從另一側裁剪圖像可以通過在另一側使用負邊界容易地完成。只有當你想要一個非矩形的裁剪路徑時，你將不得不求助於評論中引用的SVG clipPath。 Example Fiddle。

.rectshape { 
 
    overflow: hidden; 
 
    margin: 5px; 
 
    border: 1px solid #000; 
 
} 
 

 
.rectshape > img { 
 
    margin-top: -50px; 
 
    border: 1px solid #00f; 
 
}

<div class="rectshape"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> 
 
</div> 
 
<div class="rectshape"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> 
 
</div> 
 
<div class="rectshape"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> 
 
</div>

來源

2017-01-19 13:51:45

感謝這個概念..其實我有幾個圖像疊加在一個下面，所以使用負餘量有點困難。 –

負邊距僅適用於圖像，不會延伸到容器。我會更新我的答案，以包含堆疊圖像。 –

輝煌。非常感謝你的幫助。 –

使用css裁剪圖像

回答

相關問題