Сделать родительский div webkit-filter не затрагивающим детей

Я использую очень модный фильтр webkit, чтобы сделать фоновые изображения в градациях серого, а при наведении курсора на изображения становятся цветными.

Вот фильтр

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

Как вы можете видеть, есть даже свойство 'transition', так что изображение имеет плавный переход в полный цвет. Проблема, с которой я сталкиваюсь, заключается в том, что div, к которому я его применяю, также влияет на дочерний текст, расположенный внутри div, и превращает текст в оттенки серого. Это проблема, потому что текст должен быть белым, даже если он не наведен.

Я пытался отменить фильтр с помощью другого на дочернем тексте, но он не работает... Проверьте скрипку

Скрипка http://jsfiddle.net/yMHm4/1/

Источник

2 ответа

Решение

Как вы можете подумать, это не проблема наследования свойств.

Работа фильтров делает невозможным исправление изменяющихся атрибутов в CSS: элемент, на который воздействует фильтр, отображается, все дочерние элементы отображаются, а затем к результату (в виде изображения) применяется фильтр.

Таким образом, единственные оставшиеся альтернативы:

1) Измените HTML, как предложил Lowkase

2) В вашем случае кажется, что все, что вы хотите сделать серым, это фоновое изображение. В этом случае вы можете оставить HTML как есть, отобразить изображение в псевдоэлементе и применить фильтр к этому псевдоэлементу.

CSS

.cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

играть на скрипке

Я также изменил ваш фильтр на размытие, чтобы сделать его более понятным, так как фильтр не влияет на текст. Поскольку у вас также была установлена ​​некоторая прозрачность, текст по-прежнему выглядел сероватым только потому, что вы видели серый цвет под ним.

Добавлен пример использования фильтра яркости (для webkit)

демо 2

Источник

У вас было несколько ошибок HTML с вашими br, они должны быть br/, а не /br.

Следующее решение извлекает текстовый контейнер из изображения div и размещает его как элемент с абсолютным позиционированием:

http://jsfiddle.net/yMHm4/3/

#text {
    position:absolute;
    top:10px;
    left:25%;
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </div>        
    </div>
</div>

Возможно, вы могли бы использовать "не" селекторы в вашем CSS, но я не уверен, насколько они подходят для разных браузеров. Это решение - более простой способ сделать это.

Источник
Другие вопросы по тегам