Mix-blend-mode Свойство в родительском элементе, но нежелательное в дочернем элементе ⇐ CSS

[Anonymous]

Я пытаюсь создать фотографию с контуром, в котором режим смешивания-наложения используется только для контура. Я пытаюсь это сделать, используя фоновый элемент div, чтобы имитировать контур, и помещаю поверх него свое изображение. Однако я не уверен, как заставить дочерний элемент использовать обычный режим смешивания, в то время как родительский использует режим прожига цвета.

Я пытался использовать свойство isolation: isolate для дочернего элемента, но безуспешно. Вот фрагмент кода, демонстрирующий проблему:

index.html:

`

main.css:
#headshot { z-индекс: 2; изоляция: изолировать; ширина: 90%; высота: 90%; режим смешивания: нормальный; } #headshot-outline { z-индекс: 1; цвет фона: #555; режим смешивания: затемнение цвета; }