html - CSS 剪辑不适用于绝对定位

标签 html css

我正在尝试剪辑一张照片,但我希望照片的位置与我没有剪辑它时的位置相同。问题在于 CSS,您需要 position:absolute 属性在 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>

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

所以我想要一个剪裁的图像,但不要覆盖文本。

最佳答案

那是因为你没有给topoffset值。

Demo

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

值(value)观:

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

  1. 第一个数字表示顶部偏移量 - 裁剪窗口的顶部边缘。
  2. 最后一个数字表示左偏移量——裁剪窗口的左边缘。
  3. 第二个数字是裁剪窗口的宽度加上左偏移量(最后一个数字)。
  4. 第三个数字是裁剪窗口的高度加上顶部偏移量(第一个数字)。

关于html - CSS 剪辑不适用于绝对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26978707/

相关文章:

jquery - 通过文件输入更改背景图像

javascript - 试图将鼠标悬停在一个句子上并得到那个句子

javascript - 使花式框透明

html - 如何防止滚动条覆盖 IE10 中的内容?

javascript - 如何连接 3 个动态值文本框并将它们移动到剪贴板

html - 标记为单选按钮的 "Active"状态?

javascript - Google PageSpeed Insights 问题 - 优先考虑可见内容

html - 在 HTML/CSS 中构造更清晰的元素的最佳方法是什么?

css - Angular Material cdk-container 和主站点固定标题 z-index 覆盖

jquery - 如何在某个位置滑出一个div