将过滤器应用于图像时，图像上方的文字被隐藏

在下面的示例中，将过滤器应用于图像时隐藏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

将过滤器应用于图像时，图像上方的文字被隐藏

回答

相关问题