將過濾器應用於圖像時，圖像上方的文字被隱藏

在下面的示例中，將過濾器應用於圖像時隱藏h1元素中的文本，並在禁用或關閉過濾器時可見（設置爲none，或刪除了應用於img標籤的css）：將過濾器應用於圖像時，圖像上方的文字被隱藏

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <style> 
    .item { 
     position: relative; 
     height: 500px; 
    } 
    h1 { 
     height: auto; 
     font-size: 30px; 
     color:white; 
     margin-top: -50%; 
    } 
    img { 
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     filter: grayscale(100%); 
    } 
    img:hover { 
     -webkit-filter: none; 
     -moz-filter: none; 
     -ms-filter: none; 
     -o-filter: none; 
     filter: none; 
    } 
    </style> 
</head> 
<body> 
    <div class="item"> 
     <img src="image.jpg" height="500" /> 
     <h1>some text</h1> 
    </div> 
</body> 
</html>

爲什麼會發生這種情況？

來源

2014-06-19 MMSs

我不知道是什麼的發生，但可以修復這個錯誤與position屬性添加到您的h1

CSS：

h1 { 
    position:relative; 
    height: auto; 
    font-size: 30px; 
    color:#000; 
    margin-top: -50%; 
}

，並認爲通過.item:hover img爲不得不改變img:hover懸停即使你懸停H1

DEMO：http://jsfiddle.net/Z3MvU/4/

來源

2014-06-19 11:48:37

似乎與Z-index沒有任何關係，因爲它沒有它。 - http://jsfiddle.net/Z3MvU/3/這似乎是問題的定位上下文，所以可能是這樣。 –

所以它只是位置：相對;當你刪除它不起作用 –

是的，我認爲無論如何，這可能是一個好主意，以加強'堆疊順序'+1 –

如果刪除margin-top，並添加：

position: relative; 
top: -50%;

要H1它會顯示你想要的。

來源

2014-06-19 11:59:09 Oracle

將過濾器應用於圖像時，圖像上方的文字被隱藏

回答

相關問題