Question

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

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

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

然而，你的200px底部似乎表现出对剪辑的误解。我发现this article对我的理解clip非常有帮助。基本上你是按照四个数字中的第一个和最后一个来设置左上角，而是从完整元素的左上角引用的右下角（这与margin，padding等不同。）

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

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

1 个答案: