CSS - 根据同一 Div 内的图像颜色更改 Div 背景颜色

Question

我想在将鼠标悬停在 div 上时更改其背景颜色，具体取决于同一 div 内的图标。

有人知道使用什么（CSS、Bootstrap ...）来以简单的方式做到这一点，以及如何做？

这是一个示例链接： https://appsource.microsoft.com/en-us/marketplace/apps

如果您不想打开链接，这是一张图片：

Answer 1

您正在寻找的效果可以通过重复使用放大几次（〜10）的完全相同的图像来实现，与具有巨大模糊系数的

position:absolute

重叠，同时修剪其溢出：

.card { 
  height: 250px;
  width: 150px;
  margin: 1rem;
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 6px;
}
.top-bar {
  padding: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.top-bar img {
  width: 36px;
  z-index: 1;
  position: relative;
}
.top-bar img.blur {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 512px;
  filter: blur(51.2px);
  opacity: .07;
}
.card:hover img.blur {
  opacity: .42;
}

<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
    <img class="blur" src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
    <img class="blur" src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
    <img class="blur" src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
  </div>
</div>

您可以通过添加一个 JS 来进一步改进这一点，该 JS 只需即时复制

<img>

并将类

.blur

应用于它（这样您就不必手动向每张卡添加两个图像）。

注意 css-filters 还没有完整的 浏览器支持。
在您链接的示例中，模糊是使用 SVG

<filter>

（稍微好一点的浏览器支持）和

<feGaussianBlur>

完成的，但原理是相同的。