使用CSS裁剪图像

debugcn 发表于 Dev

Prithviraj mitra

我正在尝试从图片顶部裁切50px。我正在关注以下参考，但由于某种原因，它在FF中不起作用，但在Chrome中有效。

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/

任何帮助都将受到高度赞赏。

只是一个学生

由于没有很好地支持剪切路径，为什么不使用overflow: hidden和容器元素？这是您更新的JSFiddle证明了这一点。负边距可用于隐藏图像的一部分。通过在另一面使用负边距可以轻松完成从另一面裁切图像的操作。仅当您需要非矩形的剪切路径时，才必须诉诸clipPath注释中提到的SVG 。示例小提琴。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。