Проблема с маскированием CSS с использованием прозрачности файла PNG. ⇐ Html

[Anonymous]

ОБНОВЛЕНИЕ. Кажется, я решил проблему, хотя не уверен, что мое решение правильное.
Я поместил все файлы на сервер.
Я изменил прозрачность изображения маски. Я использую Paintshop Pro (знаю, древний, но обычно достаточно хороший для того, что мне нужно - старая собака, новые трюки и т. д.!)
С сервера кажется, что все в порядке. Я ненавижу, когда что-то «кажется» работает, но ты не понимаешь почему. Тестовая страница также странно отображается на планшете — слишком широкая и обрезанная справа. Но это, вероятно, обычный CSS/адаптивный материал, которого нет в простой тестовой версии.
Обновленная серверная версия
Проблема с использованием файла маски — изображение не замаскировано, ничего не отображается.
Я пробовал использовать изображение и файлы маски локально и на сервере — та же проблема.
Это работает с использованием маски с линейным градиентом, но не с PNG-файлом прозрачной маски.
Я использовал красный цвет в качестве непрозрачной области файла PNG, чтобы выделить его.
Та же проблема возникает, если непрозрачная область белая.
Я добавил файл HTML/CSS и изображения в:
Это онлайн-версия проблемы.
Изображения:
Тестовое изображение Морланда
/>Файл прозрачности PNG-маски
Код:

Код: Выделить всё

Minimal


body {
margin: auto;
background-image: url("https://i.sstatic.net/oxmCPGA4.jpg");
background-repeat: no-repeat;
}

.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}

.mask2 {
-webkit-mask-image: url("https://i.sstatic.net/i7e5pYj8.png");
mask-image: url("https://i.sstatic.net/i7e5pYj8.png");
mask-repeat: no-repeat;
}




[img]https://i.sstatic.net/i7e5pYj8.png[/img]
 

Above shows the background image masked - proving the mask file transparency is working.

Below show the mask image PNG file - the central ellipse is transparent.
[img]https://i.sstatic.net/i7e5pYj8.png[/img]

Below should show the image masked with with linear gradient.
 
[img]https://i.sstatic.net/oxmCPGA4.jpg[/img]
 

Below should show the image masked using the https://i.sstatic.net/i7e5pYj8.png file.

[img]https://i.sstatic.net/oxmCPGA4.jpg[/img]
 

Below should show the image without a mask.
[img]https://i.sstatic.net/oxmCPGA4.jpg[/img]
 

Попытка замаскировать изображение JPG с помощью файла прозрачности PNG. Маскирование линейным градиентом работает, прозрачность — нет. Я пробовал как локальные, так и серверные файлы.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ansparency