如何只增加裁剪图像的顶部高度

Question

现在我只想增加图像的顶部高度。有可能吗？我们也可以使用clip:rect()而不使用position absolute吗？

a.rollover img {
    position : absolute; 
    clip:rect(16px,60px,200px,0px);
    width: 64px;
    height: 64px;
}
a.rollover:hover > img {
    position : absolute; 
    clip:rect(6px,60px,200px,0px);
    width: 64px;
    height: 64px;
}
<a class="rollover"><img src="dest.jpg" /></a>

Answer 1

否，如果不使用position: absolute，就无法使用clip: rect()。你应该看到10px（从16px剪辑到6px剪辑）增加了:hover效果上的图像高度。

然而，您的200px底部似乎显示了对剪辑的误解。我发现这篇文章对我理解clip很有帮助。基本上，您通过四个数字中的第一个和最后一个来设置左上角，并从完整元素的左上角参考右下角（这与margin、padding等不同）。

           ^              ^
           | Top          |
           v              |
<--Left--->*              |Bottom
                          |
                          |
                          v
<--------Right----------->*