Question

我正在尝试使用网格在图像上叠加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>

Answer 1

除了过滤器，您可以使用 css的text-shadow属性可以获得更好的对比度。

Answer 2

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

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

CSS过滤器删除H1

2 个答案: