如何实现hover时仅对背景图片div应用灰度滤镜，不影响上层文本？

这个问题的核心很明确：CSS滤镜会作用于目标元素及其所有子元素，所以你直接给.profilePic加灰度滤镜时，里面的.name文本也会被连带影响。咱们可以通过分离背景图和文本的层级来解决，具体实现如下：

修改后的代码 #

HTML（优化了居中方式，替换过时的<center>标签）

<div class='profilePic one'>
  <div class='name'>Name</div>
</div>

CSS

.profilePic{
  width:190px;
  height: 190px;
  border-radius: 50%;
  float: left;
  margin:12px;
  position: relative; /* 为伪元素提供定位基准 */
  display: flex; /* 用flex实现文本居中 */
  align-items: center;
  justify-content: center;
}

/* 用伪元素单独承载背景图 */
.profilePic::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit; /* 继承父元素的圆角样式 */
  background: #ededed;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
  z-index: 0; /* 将背景层置于文本下方 */
}

.name{
  font-family: Tahoma;
  font-size: 1.5em;
  color: red;
  display: none;
  position: relative;
  z-index: 1; /* 确保文本层级高于背景层 */
}

/* 悬停时仅给伪元素（背景图）添加灰度滤镜 */
.profilePic:hover::before{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.profilePic:hover .name {
  display:block;
}

逻辑说明 #

1. 把原本.profilePic的背景样式转移到**伪元素::before**上，让背景图成为一个独立的层级。
2. 通过position和z-index明确层级关系：伪元素作为底层背景，文本.name处于上层，互不干扰。
3. 悬停时仅对伪元素应用滤镜，这样就只会让背景图变灰，上层的红色文本完全不受影响。

内容的提问来源于stack exchange，提问作者Gracy Mathew