我有一个有机形状图像的任务，我想要悬停在悬停的背景颜色，就像那个特定的有机形状图像一样。我没有带有背景颜色对图像的悬停效果。我已经尝试了很多，但是我在哪里做错了。有人可以指向正确的方向解决我的问题吗？ 预先感谢...

Question

.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure img:hover {
  background-color: #6495ED;
  border-radius: 35% 80% 65% 70%/50% 65% 70% 85%;
  transition: all 0.5s linear;
}

<div class="at-organic-shape">
  <figure>
    <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/>
  </figure>
</div>

您可以尝试使用伪元素和

mix-blend-mode

隐藏颜色溢出：

Answer 1

.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure {
  position:relative;
  background:#fff;
}
.at-organic-shape figure:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  mix-blend-mode: color;
  transition: all 0.5s linear;
}
.at-organic-shape figure:hover::after {
  background:#6495ED;
}

<div class="at-organic-shape">
  <figure>
    <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/>
  </figure>
</div>

你可以尝试这个

.at-organic-shape figure img:hover {
    -webkit-filter: drop-shadow(1px 1px 0 #6495ED) drop-shadow(-1px -1px 0 #6495ED);
    filter: drop-shadow(1px 1px 0 #6495ED) drop-shadow(-1px -1px 0 #6495ED);
    border-radius: 35% 80% 65% 70%/50% 65% 70% 85%;
    transition: all 0.5s linear;
}

。这将为您提供黑色图像的轮廓。如果您想要其他颜色，则可以更改。你想要吗？

Answer 2