c# - 在 HTML5 CSS 或 C#.NET 中裁剪图像

Question

我想选择图像上的区域，然后将其裁剪成多个部分，并使用 HTMl CSS 等将这些多张图像分别保存在一个文件夹中请指导我如何选择一个图像区域并将其分成多个图像，如 10 行和 3 列，这样将有 30 个裁剪图像并将单独保存在一个文件夹中，如果基于 Web 的应用程序，我想使用 HTMl CSS 来执行此操作如果没有，我可以使用 C# .NET 来完成此任务的独立应用程序

Answer 1

如果使用 css，我会认为你的任务有负边距。

首先，将您的图像放置到父元素中，例如在段落中(标记 <p>)。父段落应该是 float (floating)元素(或预定宽度)。我注意到在具有“全宽”属性的元素上不起作用。

接下来我们为所有四个边设置负边距:顶部、右侧、底部和左侧。负边距决定了在每个方向上如何切断，我们的图像位于父部分(第 <p> 段)。我们只得到原始图像的一部分——一个碎片。然后，当我们将父属性溢出替换为隐藏时，我们隐藏了超出我们修剪范围的字段。目标达成。但是，您必须修改准确指定所需尺寸的值。

<p class="crop"><a href="#"><img src="img.jpg" /></a></p>

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
    margin: -41px -156px -40px -30px;
}