Проблема наследования CSS-фильтра: Решение без псевдоэлемента для динамических элементов div?

Question

Проблема наследования CSS-фильтра: Решение без псевдоэлемента для динамических элементов div?

0

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

Чего я хочу достичь:

Состояние покоя: имеет ненасыщенное фоновое изображение и накладывается полупрозрачным цветным div.

Стадия наведения: насыщение изображения, изменение цвета наложения

Очевидно, что мы погружаемся в проблему наследования фильтров CSS для детей. Я должен добавить одно техническое ограничение, которое сделало невозможным до сих пор для меня: фоновое изображение не может быть применено к псевдоэлементу вроде :before. Причиной для этого является то, что он вводится inline с php в конечном приложении. À la: <div class="background-image"<?php...?>">

Вот нынешний стадион в скрипке.

Текущая проблема: оверлей имеет оттенки серого, потому что родительский элемент имеет оттенки серого. Как уже упоминалось, я пробовал разные подходы, всегда заканчивая аналогичной проблемой. Чувствует себя как в кругах. У кого есть идея?

psteinweber 18 фев. 2014, в 06:38

Источник

0

Можете ли вы построить скрипку, которая соответствует описанному ограничению? Это снизит вероятность того, что кто-то создаст решение, которое выходит за рамки этого ограничения.
BoltClock♦ 18 фев. 2014, в 05:33
0

Хороший вопрос @BoltClock, я обновил скрипку соответственно. Очевидно, что я не использую PHP, но я думаю, что он все еще имеет смысл.
psteinweber 18 фев. 2014, в 05:42

Теги:

html

css

css-filters

1 ответ

Ещё вопросы

Можете ли вы построить скрипку, которая соответствует описанному ограничению? Это снизит вероятность того, что кто-то создаст решение, которое выходит за рамки этого ограничения.
Хороший вопрос @BoltClock, я обновил скрипку соответственно. Очевидно, что я не использую PHP, но я думаю, что он все еще имеет смысл.

badAdviceGuy · Answer 1 · 2014-02-18T04-37-00.000Z

Вот одно решение, которое может сработать для вас:

Старая демонстрационная скрипка

Как вы сказали, проблема здесь в оттенках серого. Перемещая фильтр и фоновое изображение в div .post-preview, он позволяет установить .post-preview-wrapper в background-color: red и получить красный эффект наложения с помощью opaticy toggle. Я думаю, что это должно работать с вашим ограничением, поскольку оно нацелено на элементы, с которыми вы уже работаете.

-Обновить-

Вы правы, так как непрозрачность влияет на всех детей, текст закончился тоже. Если вы не можете использовать класс before, это означает, что вам придется немного изменить HTML. Перемещение фона к другому элементу позволило ему не влиять на h1. Затем вам просто нужно h1 поверх фонового изображения.

Обновленная демоверсия

HTML:

<div class="post-preview-wrapper">
    <div class="post-preview">
         <div class="post-preview-bg"></div>
         <h1><a href="#">Lorem ipsum dolor sit amet.</a></h1>
    </div>
</div>

CSS:

.post-preview-wrapper {
    // current styles

    background-color: red;
    position: relative;
}

.post-preview > h1 {
    position: absolute;
    top: 0px;
    padding: 75px;
}

.post-preview-wrapper:hover .post-preview-bg {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
}

.post-preview-bg {
    opacity: .75;
    height: 210px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    background-image: url('http://lorempixel.com/output/cats-q-c-640-480-7.jpg');
    background-size: cover;
    background-position: center center;
    -webkit-transition: 0.2s all ease-in;
    transition: 0.2s all ease-in;
}

Спасибо @badAdviceGuy. Проблема в том, что непрозрачность наследуется по тексту. Таким образом, текст не может быть на 100% белым в состоянии покоя. Правильно? Это как раз мой вопрос "ходить по кругу" ...
@psteinweber, хорошая точка зрения на непрозрачность текста. Я не уловил это. Смотрите мои правки в моем ответе, они могут работать на вас.