Question

在下面的示例中，当过滤器应用于图像时，隐藏了h1元素中的文本，并且当过滤器被禁用或关闭（可设置为无，或删除应用于img标记的css）时可见：< / p>

<!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>

为什么会这样？

Answer 1

我不知道发生了什么，但您可以通过向position

添加h1属性修复此错误

css：

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

并考虑将img:hover更改为.item:hover img，因为即使您将鼠标悬停在h1上也会悬停

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

Answer 2

如果您删除margin-top并添加：

position: relative;
top: -50%;

要h1，它会根据需要显示。

将滤镜应用于图像时，图像上的文本会被隐藏

2 个答案: