CSS同时使用过滤器和z-index属性

Question

我对CSS过滤器有疑问。我有一个<img>元素用于我的帖子背景图片，这是该元素的CSS代码：

.post-background
{
 height: 190px;
 margin-bottom: -190px;
 object-fit: cover;
 object-position: 0 -90px;
 width: 100%;
 z-index: -1;
}

现在，我想用filter: brightness(50%);使该图像变暗，但是当我设置此属性时，我的帖子内容（称为.post-front）将从页面上消失。

Answer 1

.post-background时，您必须将hover post-item图像悬停只需添加以下类并修改.post-front

.post-item:hover .post-background {
  filter: brightness(50%);
}

.post-front {
    position: absolute;
    width: 100%;
    display: grid;
    grid-template-columns: 190px 1fr 100px;
}

删除以下更改：

.post-background:hover {
    filter: brightness(50%);
}

Answer 2

我认为这就是您想要的。我不知道您的整个代码，因此很难猜测您的代码出了什么问题。这是一个如何将悬停与过滤器一起使用的示例。

.mybox{
  height:150px;
  width:250px;
  border:1px solid;
   position: relative;
}
.img{
   width: 100%;
  height:150px;
   object-fit: cover;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.textbox{
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.mybox:hover .img{
    -webkit-filter: brightness(50%) !important;
    filter: brightness(50%) !important;
}

<div class="mybox">
    <img class="img" src="https://www.hd-freewallpapers.com/latest-wallpapers/desktop-image-of-a-parrot-wallpaper.jpg" alt="Card image">
  <div class="middle">
    <div class="textbox">anyThing</div>
  </div>
</div>