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

[Anonymous]

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