ClipPath HTML 按钮的外部框阴影

Question

目前我有一张背景图片，显示了某些菜单结构的单个元素。我开始在图像上放置一些透明按钮以导航到单个页面，具体取决于您单击图像上的哪个元素。然后我使用

box-shadow: 0 0 0 2000px rgba(255, 255, 255, 0.3);

使整个 div 与图像有一些小的覆盖，只有按钮应该是清晰的。在普通按钮上它可以工作。现在的问题是：我必须使用剪辑路径将按钮与图像元素匹配，但剪辑路径不支持外部框阴影，这就是为什么我的背景不显示叠加层的原因。还有其他选择可以做到这一点吗？

当我将鼠标悬停在按钮上时，我希望图像有一些白色覆盖，但按钮应该清晰透明，以便看到正常背景而没有不透明度。对于普通按钮它可以工作，但我需要一个使用剪辑路径设计的按钮的解决方案

#panel {
  width: 100%;
  height: auto;
  position: relative;
}

#homeFontsH1 {
  position: absolute;
  display: flex;
  z-index: 3;
}

#homeFontsH2 {
  position: absolute;
  margin-top: 2%;
  display: flex;
  z-index: 3;
}

#mainDiv {
  width: 80%;
  height: auto;
  margin: auto;
  position: relative;
}

#bg {
  width: 100%;
  height: auto;
}

#ButtonNotWork {
  position: absolute;
  width: 27.2%;
  top: 25%;
  left: 16.9%;
  rotate: 41deg;
  height: 15%;
  background-color: rgba(255, 0, 0, 0.3);
  border-style: none;
  z-index: 0;
  //background-color: rgba(255, 0, 0, 0.3);
  clip-path: polygon(8% 0%, 0% 41%, 0% 50%, 3.4% 63%, 40% 63%, 33% 100%, 93% 100%, 100% 70%, 98% 50%, 90% 24%, 80% 5%, 80% 5%, 75% 0%);
}

#ButtonNotWork:hover {
  background-color: transparent;
  box-shadow: 0 0 0 2000px rgba(255, 255, 255, 0.3);
}

#ButtonWorks {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.3);
  border-style: none;
  height: 11.7%;
  width: 3.3%;
  left: 69.1%;
  top: 21%;
  z-index: 0;
}

#ButtonWorks:hover {
  background: none;
  box-shadow: 0 0 0 2000px rgba(255, 255, 255, 0.3);
}

<div id="panel">
  <div id="mainDiv">
    <img id="bg" src="https://picsum.photos/200/300">
    <button id="ButtonNotWork" title="ButtonNotWork"></button>
    <button id="ButtonWorks" title="ButtonWorks"></button>
  </div>
</div>

Answer 1

您无法使用

box-shadow

执行此操作。但是您可以在按钮后面添加一个 div 并将其显示在按钮上方的

:hover

上。像这样的东西：

#panel {
  width: 100%;
  height: auto;
  position: relative;
}

#mainDiv {
  width: 80%;
  height: auto;
  margin: auto;
  position: relative;
}

#bg {
  width: 100%;
  height: auto;
}

#ButtonNotWork {
  position: absolute;
  width: 27.2%;
  top: 25%;
  left: 16.9%;
  rotate: 41deg;
  height: 15%;
  background-color: rgba(255, 0, 0, 0.3);
  border-style: none;
  clip-path: polygon(8% 0%, 0% 41%, 0% 50%, 3.4% 63%, 40% 63%, 33% 100%, 93% 100%, 100% 70%, 98% 50%, 90% 24%, 80% 5%, 80% 5%, 75% 0%);
}

#ButtonWorks {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.3);
  border-style: none;
  height: 11.7%;
  width: 3.3%;
  left: 69.1%;
  top: 21%;
}

.layer {
  position: fixed;
  inset: 0;
  z-index: 660;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  pointer-events: none;
}

#mainDiv button:hover {
  background-color: red;
  z-index: 666;
}

#mainDiv button:hover ~ .layer {
  opacity: 1;
}

<div id="panel">
  <div id="mainDiv">
    <img id="bg" src="https://picsum.photos/200/300">
    <button id="ButtonNotWork" title="ButtonNotWork"></button>
    <button id="ButtonWorks" title="ButtonWorks"></button>
     <div class="layer"></div>
  </div>
</div>