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

[Anonymous]

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

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

Minimal


body {
margin: auto;
background-image: url("moorland.jpg");
background-repeat: no-repeat;
}
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
.mask2 {
-webkit-mask-image: url("mask.png");
mask-image: url("mask.png");
mask-repeat: no-repeat;
}




[img]mask.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]mask.png[/img]

Below should show the image masked with with linear gradient.

[img]moorland.jpg[/img]
   

Below should show the image masked using the mask.png file.

[img]moorland.jpg[/img]
   

Below should show the image without a mask.
[img]moorland.jpg[/img]
     

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

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