Вопрос по html5, javascript, jquery, css3 – применить оттенок розы или изменить яркость всего документа в css / js / jquery / html?

2

Есть ли лучшая практика для достижения этой цели? В настоящее время я использую непрозрачный красный div ширины / высоты 100%, с более высоким z-index и указателем-событиями: ни один, который позволяет всем, что работает ниже.

Кроме того, я хотел бы иметь возможность затемнить весь документ, есть ли какое-либо свойство яркости, которое я мог бы применить, или мне снова было бы лучше нанести непрозрачный черный слой поверх всего?

Просто интересно, правильно ли я поступил? Я также был бы заинтересован в решениях js / jquery, если бы они были более эффективными, меня также не беспокоит совместимость со старыми браузерами.

** Если бы кто-нибудь мог сказать мне самый простой способ сделать все черно-белым, я бы это очень оценил.

Ваш Ответ

4   ответа
2

Функция только для WebKit:

-webkit-filter: grayscale; /* Turn everything black and white */
-webkit-filter: brightness(20%); /* Make stuff brighter */

Вы можете использоватьhue-rotate, чтобы изменить оттенок, в зависимости от вашей общей цветовой схемы. Если все по-другому, вам понадобится специальный фильтр, который является более сложным и который я сейчас делаю.

Вот больше информации.

кажется идеальным, но не могу заставить его работать на последнем Chrome, что я делаю не так? Jsfiddle.net / cRJay mao
@ mao: это работает для меня ... может быть, только на Chrome Canary и WebKit по ночам. Сожалею Ry-♦
1

Вы можете использоват

body {
 opacity: 0.8; // Any value between 0 & 1 where is 0 in invisible & 1 is 100% opaque
 }

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

-webkit- Атрибуты CSS будут работать только для Chrome и Safari.

спасибо, я, вероятно, буду ориентироваться только на браузеры webkit mao
1

вы хотите, чтобы вся страница (включая «лежащие» элементы DOM) была определенного оттенка, что невозможно просто изменить цвет тела или непрозрачность. То, что вы хотите, это что-то вроде BlockUI плагин для JQuery. Если я не ошибаюсь, есть возможность разрешить пользователю взаимодействовать с элементами страницы, когда пользовательский интерфейс «заблокирован».

спасибо, не знал об этом, также выглядит очень полезным mao
1

которое я мог бы применить, или мне лучше было бы нанести непрозрачный черный слой поверх всего?

Самый простой способ:$('body').css('opacity', '0.3'); Если вы хотите изменить цвет фона, вы можете применить его к html-узлу:$('html').css('background', '#000');

** Если бы кто-нибудь мог сказать мне самый простой способ сделать все черно-белым, я бы это очень оценил.

В Internet Explorer вы можете использовать фильтры Windows. Используйте-webkit-filter: grayscale; для Chrome / Safari. Этого можно добиться и в Mozilla и Opera, но я не уверен.

cool, спасибо, я совсем забыл, что могу применить непрозрачность прямо к телу, а также полезно, чтобы я мог применить его к холсту. Не могу заставить работать фильтры webkit Jsfiddle.net / cRJay mao

Похожие вопросы