如何使背景图像成为悬停/选择区域css答案

【问题标题】：How to make the background image the hovering/selection area css如何使背景图像成为悬停/选择区域css
【发布时间】：2021-03-06 13:30:28
【问题描述】：

我想知道如何使某物的背景图像成为选择区域，因为我的背景图像是一个三角形，而我希望选择区域是一个三角形。 (CSS)

例子：


    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>h1{background-image: url(image.png)}</style>
<body>
<h1><a href="something.com">Hello</a></h1>
</body>

</html>

我希望 image.png 成为该链接的悬停/选择/触发区域，我希望这样做是因为我有一个三角形作为背景图像，并且我希望悬停区域也是一个三角形。

【问题讨论】：

标签： html css styles stylesheet

【解决方案1】：

那么你必须在你的 css 中使用 : 选择器

例如：注意 . 用于 Classes，# 用于 ids

.example-image: hover {
   //style to show when mouse hovers
}

资源：

https://www.w3schools.com/cssref/sel_hover.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

https://www.w3schools.com/howto/howto_css_image_overlay.asp

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

【讨论】：

你能以stackblitz为例吗？
用示例更新帖子，以及用于更新帖子的资源更新
谢谢，但我不是这个意思。所以假设我有一个标题，它也是一个链接，所以
hello
这有一个背景图片我想要那个 image.png，假设它是一个红色三角形，我希望它成为选择/悬停区域。我想这样做是因为背景是三角形，但现在选择区域是立方体，

hello