CSS过滤器删除H1

我试图在图像上覆盖h1，使用网格; 为了获得更好的对比度，我想在图像上使用filter:brightness(80%) ，不幸的是，它完全消除了h1。CSS过滤器删除H1

有没有解决这个问题的方法？（没有在CSS中的图片网址粘贴）（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>

来源

2017-09-26 Lienleaf

当您为'filter'使用任何值时，将创建新的堆叠顺序。 –

替代方法：https://stackoverflow.com/q/35871294/3597276 –

将'z-index：1'添加到'h1'。看起来'filter'导致'img'创建单独的堆栈上下文，因此它会覆盖没有'z-index'的同级元素。 –

除了过滤，你可以使用CSS的 text-shadow属性为更好的对比。

来源

2017-09-26 15:11:53

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

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

来源

2017-09-27 00:21:05

CSS过滤器删除H1

回答

相关问题