CSS过滤器删除H1 [重复]答案

【问题标题】：CSS Filter removes H1 [duplicate]CSS过滤器删除H1 [重复]
【发布时间】：2017-09-26 14:59:11
【问题描述】：

我正在尝试使用 Grid 将 h1 覆盖在图像上；为了更好的对比，我考虑过使用filter:brightness(80%) 在图像上，不幸的是，它完全删除了 h1。

有什么解决方法吗？（没有在 CSS 中粘贴图像 URL）（filter评论给你申请看看）

body{
  background: grey;
  margin: 10px;
  color: white;
  text-align: center;
}
img{
  max-width: 100%;
  max-height: 100%;
}
.gridcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  max-width: 100vw;
  align-items: center;
}

.griditem{
  background: black;
}

.headingcover{
  grid-column: 1/3;
  grid-row: 1/2;
  /* filter: brightness(80%); */
}
h1{
  grid-column: 1/3;
  grid-row: 1/2;
}

  <div class="gridcontainer">
    <img src="https://source.unsplash.com/7TGVEgcTKlY" alt="" class="headingcover">
    <div class="griditem b">b</div>
    <div class="griditem c">c</div>
    <div class="griditem d">d</div>
    <h1>Foxy</h1>
  </div>

【问题讨论】：

当您为filter 使用任何值时，您将创建一个新的堆叠顺序。
替代：stackoverflow.com/q/35871294/3597276
将z-index:1 添加到h1。似乎filter 导致img 创建单独的堆栈上下文，因此它会覆盖没有z-index 的兄弟元素。

标签： html css overlay css-grid css-filters

【解决方案1】：

您可以使用过滤器以外的其他 css 的 text-shadow 属性以获得更好的对比度。

【讨论】：

【解决方案2】：

尝试将 z-index 添加到您的 h1 以将其放在元素堆栈中的过滤器上方。

h1 { 
    grid-column: 1/3; 
    grid-row: 1/2;
    z-index: 10;
}

【讨论】：