Как сделать, чтобы на png картинку случайным образом накладывался gradient определённого оттенка?

Рейтинг: 0Ответов: 1Опубликовано: 03.03.2023

У меня png картинка, мне нужно, чтобы на неё в рандомных местах накладывался linear-gradient с оттенком определённого цвета (например, красный) и плавно менял своё местоположение. Как это реализовать с помощью js css?

Вот код картинки на которое происходит наложение:

.section-1__bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 40%;
}
css javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Как-то так можно. Лучше использовать <canvas>

// Получаем элементы <img> и <canvas> из DOM
const img = document.getElementById("img");
const canvas = document.getElementById("canvas");

// Устанавливаем размеры <canvas> равными размерам <img>
canvas.width = img.width;
canvas.height = img.height;

// Получаем контекст рисования на <canvas>
const ctx = canvas.getContext("2d");

// Устанавливаем начальные координаты прямоугольника и скорость перемещения
let x = 0;
const y = canvas.height * 0.3;
const speed = 5;

// Задаем функцию, которая будет вызываться для отрисовки каждого кадра анимации
function draw() {
  // Очищаем холст
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Отрисовываем прямоугольник
  const rectWidth = canvas.width * 0.4;
  const rectHeight = canvas.height * 0.4;
  const gradient = ctx.createLinearGradient(x, y, x + rectWidth, y + rectHeight);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  ctx.fillStyle = gradient;
  ctx.fillRect(x, y, rectWidth, rectHeight);

  // Обновляем координаты прямоугольника для следующего кадра
  x += speed;
  if (x > canvas.width) {
    x = -rectWidth;
  }

  // Зацикливаем анимацию
  requestAnimationFrame(draw);
}

// Начинаем анимацию
draw();
body {
  margin: 0;
}

.block {
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}
<div class="block">
  <img id="img" src="http://placebeard.it/340x280" width="340" height="280" alt="man">
  <canvas id="canvas"></canvas>
</div>