Использование Jpeg для маскировки другого изображения с чистым CSS? - PullRequest
Новая
       23

Использование Jpeg для маскировки другого изображения с чистым CSS?

0 голосов
/ 04 апреля 2019

Мне нужно использовать черные пиксели изображения в формате JPEG в качестве «слоя прозрачности», чтобы замаскировать другое изображение.

Когда я использую это PNG-изображение в качестве маски, оно отлично работает:

(это белый квадрат на альфа-фоне)

enter image description here

Но мне нужно сделать то же самое с изображением в формате JPEG, заменив альфа-канал черным! (без альфа-канала).

Вот мой CSS: 

#selection-image {
  width: 1000px;
  height: 800px;
  position: absolute;
  -webkit-mask-image: urlhttps://image.noelshack.com/fichiers/2019/14/4/1554391365-output-onlinepngtools-2.png);
  -webkit-mask-size: 1000px 800px;
  mask-image: url(https://image.noelshack.com/fichiers/2019/14/4/1554391365-output-onlinepngtools-2.png);
  mask-size: 1000px 800px;
  mask-type: alpha;
  background: red;
}

Я не могу использовать холст для удаления черного пикселя, так как это занимает слишком много времени. Я думал, что смогу использовать свойство mask-type: luminance, но, похоже, оно работает только с альфа-каналом ..

...