Есть много разных градиентов и есть всплывающее попап окно. Окно имеет цвет определенного выбранного пользователем градиента, и в правом углу попапа должен быть крест (Х) закрывающий попап. Для того, чтобы этот самый крест был виден на любом градиенте, хотел заюзать примерно такой вариант преобразования цвета самого креста:
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 (или определенное, в том или ином месте блока, который залит градиентом, в данном случае - самый правый верхний угол), чтобы пользоваться функцией сверху?
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">
Виртуальный выделенный сервер (VDS) становится отличным выбором
Смысл функции в том , что она берет элементы внутри 3 блоков , там находится по 1 элементу , но таких конструкций по 3 блока много и срабатывает...
Гугл скрипт связан вебхуком с телеграм ботомЯ хочу, чтобы сообщение из бота разбивалось на нужные мне куски и отправлялось в гугл таблицу
Не буду здесь приводить тонны своего кода, покажу на примере в чём проблема