Блог

Главная - Вопросы по программированию - Текст поверх изображения становится скрытым, когда к изображению применяется фильтр

Текст поверх изображения становится скрытым, когда к изображению применяется фильтр

#html #css

#HTML #css

Вопрос:

В приведенном ниже примере текст в элементе h1 скрыт, когда фильтр применяется к изображению, и виден, когда фильтр отключен или выключен (установлено значение none или удален css, примененный к тегу img):

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

Почему это происходит?

Ответ №1:

Я не знаю, что происходит, но вы можете исправить эту ошибку, добавив position свойство в свой h1

css :

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

и подумайте, чтобы изменить img:hover на .item:hover img для наведения курсора мыши даже при наведении курсора h1

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/Z3MvU/4 /

Комментарии:

1. Похоже, не имеет ничего общего с Z-index, поскольку он работает без него. — jsfiddle.net/Z3MvU/3 Похоже, проблема заключается в контексте позиционирования, так что, возможно, так оно и есть.

2. Так что это просто position: relative; когда вы удаляете его, это не работает

3. Да, я так думаю, в любом случае, вероятно, неплохо усилить «порядок укладки` 1

Ответ №2:

Если вы удалите margin-top и добавите:

 position: relative;
top: -50%;

Для h1 он отображается так, как вы хотите.

Метки: