Как вычесть цвет в определенном месте из градиента?

123
06 октября 2019, 12:50

Есть много разных градиентов и есть всплывающее попап окно. Окно имеет цвет определенного выбранного пользователем градиента, и в правом углу попапа должен быть крест (Х) закрывающий попап. Для того, чтобы этот самый крест был виден на любом градиенте, хотел заюзать примерно такой вариант преобразования цвета самого креста:

function invertColor(rgb) {
    var yuv = rgb2yuv(rgb);
    var factor = 180;
    var threshold = 100;
    yuv.y = clamp(yuv.y + (yuv.y > threshold ? -factor : factor));
    return yuv2rgb(yuv);
}

Однако проблема заключается в том, что градиент не имеет одного постоянного цвета и переливается из одного в другой. Как лучше всего получать среднее значение RGB (или определенное, в том или ином месте блока, который залит градиентом, в данном случае - самый правый верхний угол), чтобы пользоваться функцией сверху?

Answer 1

filter: hue-rotate(), mix-blend-mode.

Можно использовать режимы наложения из css. JS-код тут чисто для "шоу". Сама картинка крестика белая и подстраивается под слой ниже.

document.getElementsByTagName("input")[0].addEventListener("input", e => { 
  document.getElementsByTagName("div")[0].style.filter = `hue-rotate(${e.currentTarget.value}deg)`; 
});
div { 
  position: relative; 
  width: 100px; 
  height: 100px; 
  padding: 10px; 
  background: linear-gradient(45deg, rgba(252, 183, 22, 1) 0%, rgba(255, 53, 56, 1) 33%, rgba(120, 39, 206, 1) 100%); 
} 
 
div>img { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  mix-blend-mode: exclusion; 
}
<div> 
  <img src="https://passe-compose.be/wp-content/uploads/2017/09/makefg.png"> 
</div> 
 
<input type="range" min="0" max="255">

READ ALSO
Нужна помощь с функцией JS

Нужна помощь с функцией JS

Смысл функции в том , что она берет элементы внутри 3 блоков , там находится по 1 элементу , но таких конструкций по 3 блока много и срабатывает...

146
? вместо эмодзи

? вместо эмодзи

Гугл скрипт связан вебхуком с телеграм ботомЯ хочу, чтобы сообщение из бота разбивалось на нужные мне куски и отправлялось в гугл таблицу

132
Прошу помощи с обобщённые типами (generics)

Прошу помощи с обобщённые типами (generics)

Не буду здесь приводить тонны своего кода, покажу на примере в чём проблема

122
Подъем функции в ES6 [дубликат]

Подъем функции в ES6 [дубликат]

На данный вопрос уже ответили:

100