将形状和图像与HTML和CSS联系起来的许多方法

许多网站设计需要使用非方形或矩形形状来响应点击事件。也许您的网站有一些倾斜或弯曲的横幅，如果使用直角矩形，点击区域会显得笨拙地过大。或者您有一个形状独特的大型徽标，您只想让该独特形状可点击。或者您有一个交互式图像，点击其不同区域时会产生不同的响应。

您可以用未设置样式的<a></a>标签包围这些资源，以获得大小大致合适的可点击矩形。但是，您也可以使用不同的技术来控制该区域的形状，确保点击区域的目标与屏幕上显示的内容完全匹配。

SVG形状

如果您的点击目标是图像或图像的一部分，并且您可以选择SVG作为其格式，那么您已经对该元素在页面上的行为有了很大的控制权。使SVG的一部分可点击的最简单方法是向标记中添加SVG超链接元素。这就像用<a></a>标签包装目标一样简单，就像包装嵌套的HTML元素一样。您的<a></a>标签可以包围简单的形状或更复杂的路径。它可以包围一组SVG元素或只有一个。在这个例子中，靶心的链接包装了一个单独的圆形元素，但更复杂的箭头形状由两个多边形和一个路径元素组成。

请注意，我在此演示中使用了已弃用的xlink:href属性，以确保链接可在Safari上运行。仅使用href可在Internet Explorer、Chrome和Firefox中运行。

这里唯一的技巧是确保<a></a>标签位于SVG标记内，并且该标签包装了您想要可点击的形状。此SVG的视区仍然是矩形，因此包装整个SVG元素不会产生相同的效果。

图片地图

假设您无法控制SVG标记，或者您需要向光栅图像添加可点击区域。可以使用图像地图将可点击目标应用于img标签的一部分。

图像地图与图像源分开定义。地图实际上会覆盖整个图像元素，但由您定义可点击区域。与SVG示例中的超链接元素不同，图像地图中的坐标与源图像的定义无关。图像地图自HTML 3以来就存在，这意味着它们具有出色的浏览器支持。但是，它们不能仅用CSS进行样式设置以提供交互式提示，就像我们使用SVG在悬停时所做的那样——光标是图像目标区域可以点击的唯一视觉指示器。但是，可以使用JavaScript对区域进行样式设置。

W3Schools有一个使用太阳系图片的图像地图的优秀示例，其中太阳和行星链接到这些目标的特写图像——图像中的其他任何地方都不可点击。这是因为图像地图中定义的区域坐标与基本图像中太阳和行星的位置相匹配。

这是Derek Fogge的另一个示例，它使用地图创建更有趣的点击目标。它确实使用jQuery在点击时设置区域样式，但请注意地图覆盖图像的方式以及如何使用坐标创建目标。

您也可以在更复杂的形状上实现图像地图。事实上，让我们回到SVG示例中的相同目标形状，但这次使用光栅图像。我们仍然希望链接箭头和靶心，但这次没有SVG元素来帮助我们。对于靶心，我们知道底层图像中的X和Y坐标及其半径，因此定义区域的圆形非常容易。箭头形状更复杂。我使用https://www.image-map.net绘制形状并生成图像地图的区域——它由一个多边形和一个圆形组成，用于顶部圆形边缘。

剪辑路径

如果您想使用CSS定义自定义点击区域的形状，而无需使用JavaScript进行样式设置，该怎么办？CSS clip-path属性为定义和设置任何HTML元素上的目标区域的样式提供了相当大的灵活性。

这里我们有一个五角星形状的点击区域。该星形从技术上讲是一个多边形，因此我们可以像在前面的图像地图示例中那样使用星形基本图像和具有相应坐标的图像地图。但是，让我们使用clip-path。以下示例显示应用于JPG图像和绝对定位的超链接元素的相同clip-path。

clip-path的浏览器支持已经好得多，但对于某些值仍然可能不一致。在依赖它之前，请务必检查支持和供应商前缀。

我们还可以根据最适合特定点击目标形状的方法混合和匹配不同的方法。在这里，我结合使用了Bennet Freely的clippy创建的“关闭”形状和SVG超链接元素来构建可点击井字游戏。SVG在这里很有用，可以确保“O”形状中间的“孔”不可点击。但是，对于“X”（这是一个多边形），单个clip-path可以对其进行样式设置。

同样，请注意浏览器支持，尤其是在混合和匹配技术时。上面的演示并非在所有地方都受支持。

没有透明边框的CSS形状

clip-path属性允许我们将预定义的形状应用于我们选择的HTML元素，包括超链接元素。还有许多其他选项可以创建不是正方形和矩形的HTML和CSS元素——您可以在《CSS的形状》中看到其中一些。但是，并非所有技术都会像您预期的那样影响点击区域的形状。CSS形状中的大多数示例都依赖于透明边框，即使您的用户看不到它们，DOM仍然会将它们识别为点击目标的一部分。其他技巧，如定位、转换和伪元素（如::before和::after）将使您的样式化超链接与其可见形状保持一致。

这是一个不依赖透明边框的CSS心形形状。您可以看到红色心形是元素中唯一可点击的区域。

这是另一个使用透明边框创建CSS三角形形状的示例。您可以看到点击区域最终位于实际形状之外。将鼠标悬停在元素上，您将能够看到点击区域的真实大小。

希望这能让您很好地了解使用HTML和CSS创建图像和形状上的可点击区域的多种方法。您可能会发现需要使用JavaScript才能获得更高级的交互式体验。但是，HTML、CSS和SVG的组合功能为控制点击目标的精确形状提供了相当多的选项。

以上是将形状和图像与HTML和CSS联系起来的许多方法的详细内容。更多信息请关注PHP中文网其他相关文章！