0

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

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 (или определенное, в том или ином месте блока, который залит градиентом, в данном случае - самый правый верхний угол), чтобы пользоваться функцией сверху?

2
  • А о какой технологии конкретно идет речь canvas. webgl, svg, dom? Если о двух последних, то можно фильтрами попробовать..
    – user220409
    14 фев 2019 в 19:06
  • Сами по себе градиенты это обычные background-image, примерно такие: linear-gradient(45deg,#23bcbb,#45e994) Их там очень много, около 700 штук, и писать для каждого отдельное будет сложно. Используется только dom. Единственная задача, это получать такой цвет, который будет отчетливо виден на фоне того или иного градиента (заранее, конечно, какой он будет именно неизвестно). Я думал каким-то образом получать средний цвет и юзать функцию, которую приложил в вопросе, но в итоге ничего не вышло и я вообще без малейшего понятия как это реализовать 14 фев 2019 в 19:10

1 ответ 1

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">

2
  • Привет. Извини, а можно как-то отрегулировать степень изменения цвета? Уж слишком варьируется от разных оттенков и получается странная картина. Можно как-то сделать черный / белый вариант и будет выбираться в зависимости от того, насколько хорошо будет виден на фоне? 14 фев 2019 в 23:57
  • @ВячеславНемидов попробуй другие режимы наложения или другие цвета иконки закрытия, измени прозрачность. Вся инфа есть по ссылкам. 15 фев 2019 в 7:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.