Как инвертировать цвет базового div?

Question

Как инвертировать цвет базового div?

0

У меня есть два разных div, один поверх другого.

<div id="upper" style="background-color:transparent;z-index:2
                       width:15px;height:15px;
                       position:absolute;
                       top:0px;left:0px;
                       filter:invert(100%)"></div>
<div id="lower" style="background-color:#ff9900;z-index:1
                       width:100%;height:100px;
                       position:absolute;
                       top:0px;left:0px"></div>

Нижний div может изменить цвет во время, верхнее погружение должно получить более низкий цвет, но инвертировано!

Это кажется легким, но рассмотрим это условие: верхний div не знает, что он имеет под собой, он может быть больше divs, например. В сценарии, который я написал, я просто сделал это легко, но я не могу выбрать конкретный элемент и получить его цвет.

Как сделать?

В примере, который вы видели, я использовал filter:invert(100%) поскольку я думал, что это может быть решение.

Andry 11 апр. 2014, в 17:19

Источник

0

Возможный дубликат Есть ли родительский селектор CSS?
Paulie_D 11 апр. 2014, в 14:24
0

Я думал, что это -webkit-filter: invert();
Apolo 11 апр. 2014, в 14:25
0

Цвет фона для #upper прозрачный. Когда вы применяете filter: invert на transparent он все равно будет transparent . Нет никакого способа сделать элемент, чтобы «знать», что под ним. Однако есть много других способов сделать это, например, использовать <canvas> .
Derek 朕會功夫 11 апр. 2014, в 14:25
0

ты забыл ';' после каждого свойства z-index
Apolo 11 апр. 2014, в 14:26
0

Это не дубликат этого вопроса. Я сказал вам, что ниже вы можете иметь все возможные div не строго родитель в DOM!
Andry 11 апр. 2014, в 14:26
0

Так что покажите нам полный HTML их, CSS не может влиять на элементы выше в DOM, что, по-видимому, вы пытаетесь сделать. Если вы можете изменить структуру HTML ... мы можем поговорить снова.
Paulie_D 11 апр. 2014, в 14:29
0

Возможно, я объяснил это не правильно ... также показывать вам полный HTML не имеет смысла. Дело не в иерархии DOM, а в том, что выше и ниже объекта! Как графические объекты складываются, и это происходит независимо от иерархии DOM!
Andry 11 апр. 2014, в 14:31
0

Если вы планируете использовать canvas, вы можете посмотреть эту тему: stackoverflow.com/questions/7985722/…
Apolo 11 апр. 2014, в 14:51

Показать ещё 6 комментариев

Теги:

javascript

html

css

html5

css3

1 ответ

Ещё вопросы

Возможный дубликат Есть ли родительский селектор CSS?
Цвет фона для #upper прозрачный. Когда вы применяете filter: invert на transparent он все равно будет transparent . Нет никакого способа сделать элемент, чтобы «знать», что под ним. Однако есть много других способов сделать это, например, использовать <canvas> .
ты забыл ';' после каждого свойства z-index
Это не дубликат этого вопроса. Я сказал вам, что ниже вы можете иметь все возможные div не строго родитель в DOM!
Так что покажите нам полный HTML их, CSS не может влиять на элементы выше в DOM, что, по-видимому, вы пытаетесь сделать. Если вы можете изменить структуру HTML ... мы можем поговорить снова.
Возможно, я объяснил это не правильно ... также показывать вам полный HTML не имеет смысла. Дело не в иерархии DOM, а в том, что выше и ниже объекта! Как графические объекты складываются, и это происходит независимо от иерархии DOM!
Если вы планируете использовать canvas, вы можете посмотреть эту тему: stackoverflow.com/questions/7985722/…

Kraang Prime · Answer 1 · 2014-04-11T12-14-00.000Z

Попробуй это

<div id="upper" style="background-color:#ff9900;z-index:2;
                       width:15px;height:15px;
                       position:absolute;
                       top:0px;left:0px;
                       -webkit-filter:invert(100%);
                       filter:invert(100%);"></div>
<div id="lower" style="background-color:#ff9900;z-index:1;
                       width:100%;height:100px;
                       position:absolute;
                       top:0px;left:0px"></div>

В принципе, как указано в комментариях "Дерек", у вас должен быть цвет для инвертирования. Кроме того, из "Apolo", -webkit -фильтр: инвертировать(), также следует использовать для браузеров на основе webkit.

Вы можете комбинировать стандартные методы с методами -webkit для лучшей поддержки кросс-браузера.

Пожалуйста, проверьте здесь, чтобы убедиться, что ваш браузер поддерживает эту функцию >> Тесты фильтра CSS3

В моих тестах на jsFiddle это не поддерживается в моей версии FireFox (28.0)

стандартное свойство, такое как фильтр, должно быть после свойств поставщика. знак равно
и я почти уверен, что ему нужно добавить ';' после свойств z-index
ты прав. Кроме того, кажется, что инвертирование не работает должным образом в Firefox -.-
также пробовал в jsfiddle, работает сначала, но не больше ^^
Я знаю, что это можно сделать с помощью JavaScript, однако ОП запрашивал решение CSS. Ему просто нужно знать, что это поддерживается не во всех браузерах.
похоже, это инвертирует верхний div, а не нижний ...
@Michael - "верхнее погружение должно получить нижний цвет, но перевернутое!" ... инверсия в прозрачном верхнем элементе будет использовать нижний цвет для значения, чтобы инвертировать.