css - 无法剪辑图像(css)

Question

我有一个我想使用 style.clip 裁剪的图像

<div><img src="someimage.jpg" style=" z-index:1000; width:200px; height:200px; position:absolute; top:10px; left:10px; clip:rect(30px 15px 30px 15px); overflow:hidden;" id="zoom1"/></div>

但它不起作用。图像就消失了。

为什么不裁剪图像？

Answer 1

您正在应用的形状是 0px width, 0px height
剪辑适用:

rect(<top>, <right>, <bottom>, <left>)

由于顶部和底部相等以及左右相等，因此没有可显示的像素。

您的剪辑来自:

Horizontally: 15px to 15px == 0px to display
Vertically: 35px to 35px == 0px to display

Reference