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

Question

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

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

现在，我想用 filter: brightness(50%); 使图像更暗，但是当我设置这个属性时，我的 post 内容（称为 .post-front）从页面上消失了.

Answer 1

我想这就是你想要的。我不知道你的整个代码，所以很难猜出你的代码出了什么问题。这是一个如何将悬停与过滤器结合使用的示例。

.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>

Answer 2

当您 hover post-item 时，您必须将鼠标悬停在 .post-background 图像上只需添加以下 class 并修改 .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%);
}

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

CSS using filter & z-index properties together

html

css

z-index

css-filters