Если у меня будет прозрачное изображение, оно получит цвет фона. Иногда, однако, на переднем плане моего изображения тот же цвет фона. И иногда я думаю, что было бы здорово выглядеть противоположным (дополнительным) цветом своего фона. Например, черный на белый, красный на зеленый, синий на оранжевый и т.д. Возможно ли это и как мне это сделать?
2 ответа
Я собираюсь догадаться, что это касается дизайна веб-сайта в частности.
Хотя это невозможно сделать с одним изображением (в котором есть только альфа-канал, и не более того), современные браузеры имеют такие функции CSS, как background-blend-mode и mix-blend-mode. Я думаю, что установка mix-blend-mode на exclusion
даст вам желаемый результат ...
(Конечно, это зависит от браузера, хотя в настоящее время широко поддерживается. Для IE вы можете найти что-то похожее в фильтрах...)
Прозрачное изображение - по определению - не имеет цвета фона. На самом деле, обычный файл изображения даже не имеет понятия "передний план" или "фон". Обычно изображения состоят только из одного слоя пикселей, а цвет этих пикселей определяется количеством красного, зеленого и синего. В прозрачных изображениях эти пиксели дополнительно указывают альфа-значение, которое определяет их непрозрачность.
Я думаю, что вам нужно автономное изображение, которое могло бы каким-то образом выяснить, на каком фоне оно было показано. Это технически невозможно. Например, браузер просто отобразит ваш прозрачный файл PNG, где бы веб-сайт не указывал свое местоположение, какой бы цвет фона (или изображение) там ни находился. Вы должны генерировать разные цвета на изображении для разных фонов.
(Конечно, существуют более сложные форматы изображений, такие как многослойный TIFF или даже файл Photoshop, в котором может быть несколько слоев с различными эффектами наложения, но я понимаю, что это не контекст этого вопроса.)