使用CSS3如何让图片的一个区域可以点击跳转

小米官网的这个效果,这里有一个DIV标签,无论如何拉动都可以保持在需要点击的这个位置,请问一下怎么实现的?

在CSS3中，可以使用伪类 ::before 和 ::after 来创建一个覆盖在图片上的透明层，并使用 position、width 和 height 等属性来调整该层的位置和大小。然后，使用 z-index 属性将该层置于图片之上，并为其添加 pointer-events: none 样式来确保鼠标点击能够穿透该层。

最后，可以在该层上添加链接元素（）或 JavaScript 事件处理程序来实现点击跳转。

<div class="image-wrapper">
  <img src="path/to/image.jpg" alt="Image">
  <a href="https://example.com" class="overlay-link"></a>
</div>

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 要点击跳转的区域宽度 */
  height: 100%; /* 要点击跳转的区域高度 */
  z-index: 1;
  pointer-events: none;
}

.overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 要点击跳转的区域宽度 */
  height: 100%; /* 要点击跳转的区域高度 */
  z-index: 2;
}

以下答案引用自GPT-3大模型,请合理使用：

首先，你需要在容器里创建一个DIV标签：

<div class="clickable-area"></div>

然后，你需要把图片作为背景，并且设置正确的尺寸和定位：

.clickable-area {
  position: relative;
  width: 400px;
  height: 200px;
  background: url('img/clickable-area.jpg') center center no-repeat;
}

最后，你需要使用CSS3中的“形状区域”特性创建可点击区域，这里以圆形为例：

.clickable-area {
  /* 上面的代码还保留 */
  shape-outside: circle(50%);
  cursor: pointer;
}

同时，给DIV标签加上一个点击事件，指向你想跳转的页面：

// 在HTML文件
<div class="clickable-area" onclick="window.location.href='https://www.mi.com';"></div>

// 或者在JavaScript文件
const clickableArea = document.querySelector('.clickable-area');
clickableArea.addEventListener('click', function() {
  window.location.href = 'https://www.mi.com';
});

如果我的回答解决了您的问题，请采纳我的回答

给需要点击的那个div设置固定定位（position: fixed;），他是参照浏览器来进行定位的，所以无论你怎么拖拽其他的地方，定位后的div永远不变

• 这篇文章讲的很详细，请看：CSS3中的动画属性具体有哪些呢