使用css裁剪图像

Question

我正在尝试从图像顶部裁剪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/

非常感谢任何帮助。

Answer 1

由于剪辑路径为not supported very well，为什么不使用start_id+10和容器元素？这是你的updated JSFiddle证明了这一点。负边距可用于隐藏部分图像。通过在另一侧使用负边距，可以轻松地从其他侧面裁剪图像。只有在需要非矩形剪切路径时，才必须使用注释中引用的SVG clipPath。 Example Fiddle

＆＃13;

＆＃13;

overflow: hidden

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;