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

回答

相關問題