css 图片 区域坐标值 |css和svf

img {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
}
#img1 {
background-color: red;
}
#img2 {
background-color: blue;
}
#img3 {
background-color: green;
}

上面的代码示例展示了用 CSS 为图片定义了三个区域，分别为 id 为 img1、img2 和 img3。要为这些区域分别设置坐标值，可以使用以下代码：

#img1 {
clip-path: polygon(0 0, 100px 0, 100px 50px, 0 50px);
}
#img2 {
clip-path: polygon(50px 0, 100px 0, 100px 100px, 50px 100px);
}
#img3 {
clip-path: polygon(0 50px, 100px 50px, 100px 100px, 0 100px);
}

上面的代码用 clip-path 属性分别设置了三个区域的坐标值。每个区域使用的是一个多边形，由多个点的坐标值组成。

为了设置不同区域的样式，可以在 CSS 代码中使用不同的 id 选择器来选择不同区域，例如上面的代码中的 #img1、#img2 和 #img3。然后使用 CSS 样式来设置这些区域的样式，例如 background-color 属性。

最后，上面的代码示例中的 img 元素也定义了一些共通的样式，例如宽度、高度和边距等，这些代码可以根据实际需要调整。