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

您可以通过添加一个简单地复制 <img> 并对其应用类 .blur 的 JS 来进一步改进这一点（因此您不必手动为每张卡片添加两个图像）。

注意 css 过滤器还没有完整的browser support。
在您链接的示例中，模糊是使用 SVG <filter>（稍微好一点的browser support）和<feGaussianBlur> 完成的，但原理是一样的。