CSS сделать спрей

Эффект «спрей» в CSS можно создать с помощью псевдоэлемента ::before или ::after и свойства background-image.

Вот пример, как можно создать эффект «спрей» на заднем плане элемента:

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("spray.png");
  opacity: 0.5;
  pointer-events: none;
}

Обратите внимание, что в этом примере мы используем псевдоэлемент ::before, который создает новый элемент на заднем плане основного элемента. Мы также установили для него абсолютное позиционирование и размеры, чтобы он полностью покрывал основной элемент. Затем мы задали свойство background-image, которое указывает на изображение спрея, и свойство opacity, которое контролирует прозрачность элемента.

Чтобы изображение спрея на заднем плане не мешало пользователю взаимодействовать с элементом, мы используем свойство pointer-events: none;. Оно отключает все события курсора мыши и позволяет пользователю кликать и взаимодействовать с элементом, как будто псевдоэлемента нет.

Обратите внимание, что вместо url("spray.png") вы можете указать путь к своему собственному изображению спрея. Также можно настроить свойства элемента и псевдоэлемента, чтобы достичь желаемого эффекта.