CSS剪辑不适用于绝对定位
Posted
技术标签:
【中文标题】CSS剪辑不适用于绝对定位【英文标题】：CSS clip not working with absolute positioning 【发布时间】：2014-11-17 17:49:16 【问题描述】：我正在尝试剪裁一张照片，但我希望照片的位置与我未剪裁时的位置相同。问题在于 CSS 你需要一个 position:absolute 属性在 css 中然后覆盖数据。
例如：
<html>
<head>
<style>
img
position: absolute;
clip: rect(0px,60px,200px,0px);
</style>
</head>
<body>
<img src="w3css.gif" >
this is some text
</body>
</html>
这段代码用剪切的图像覆盖了“这是一些文本”文本。
所以我想要一个剪裁的图像，但不要掩盖文字。
【问题讨论】：
position: absolute 从文档的正常流程中删除元素。因此它们将重叠以下元素。
有没有办法在保持文档正常流动的同时裁剪图像？
CSS Clip and Absolute Positioning 的可能重复项
为什么不将图像包裹在一个相对定位的DIV中？
【参考方案1】：
这是因为你没有给出topoffset 的值。
Demo
img
position: absolute;
clip: rect(20px,60px,200px,0px);
值：
clip: rect(top offset, visible width, visible height, left offset)
-
第一个数字表示顶部偏移 - 剪辑窗口的顶部边缘。
最后一个数字表示左偏移 - 剪辑窗口的左边缘。
第二个数字是剪辑窗口的宽度加上左偏移量（最后一个数字）。
第三个数字是剪辑窗口的高度加上顶部偏移量（第一个数字）。
【讨论】：
我不希望文字出现在图像上。我希望行为就像您取出“位置：绝对”一样，图片将在左侧（裁剪）而文本将在右侧，就像我根本没有裁剪图像一样. @Matthew - 那么你想从哪里裁剪图像？左、右、上、下？ @Matthew -clip 属性仅在定位于 absolutely 时才有效。
@Matthew - 你能创建一个图像来显示你想要什么吗？
我不知道如何上传图片，但想象一下，在我的网络服务器上，我有一张汽车的图片。实际图像文件是车辆从保险杠到保险杠的完整图像。我想做的是让 CSS 将照片裁剪到门上。我希望照片保持完整，但只显示裁剪后的照片。我希望裁剪后的照片表现得就像它自己的照片一样。以上是关于CSS剪辑不适用于绝对定位的主要内容，如果未能解决你的问题，请参考以下文章
CSS position绝对定位absolute relative