应用错误收集

CSS剪辑无法使用绝对定位

时间：2014-11-17 17:49:17

标签： html css

我正在尝试剪辑一张照片，但我希望照片处于相同的位置，就好像它没有剪辑一样。问题在于你需要一个位置：css中的绝对属性，然后覆盖数据。

例如：

<html>
<head>
<style>
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">
this is some text
</body>
</html>

此代码用剪切的图像覆盖“这是一些文本”文本。

所以我想要一个剪裁的图像，但文字不被遮盖。

1 个答案:

答案 0 :(得分：3)

这是因为你没有给出topoffset值。

Demo

img {
    position: absolute;
    clip: rect(20px,60px,200px,0px);
}

值：

clip: rect(top offset, visible width, visible height, left offset)

第一个数字表示顶部偏移 - 剪切窗口的上边缘。
最后一个数字表示左侧偏移 - 剪切窗口的左边缘。
第二个数字是剪切窗口的宽度加上左偏移量（最后一个数字）。
第三个数字是剪裁窗口的高度加上顶部偏移量（第一个数字）。