Разрешить тексту закрывать границу элемента div, но не его фоновое изображение **без изменения структуры HTML** ⇐ CSS

[Anonymous]

Существует сообщение SO, в котором описаны некоторые основы того, что мне нужно сделать: плавающий текст над границей/контуром и скрытие этим текстом границы/контура. Но у меня есть два ключевых ограничения/требования, которые делают это решение нежизнеспособным для моего случая:

• Я не могу измениться структура HTML, которая представляет собой внутри , поэтому я не могу использовать один и тот же и > трюк, который так хорошо работает в этом примере. (Я использую платформу, которая позволяет мне изменять только CSS и внутреннее содержимое .)
• В есть фотография фон, поэтому я не могу просто поставить под текст непрозрачный одноцветный фон. Я бы хотел, чтобы граница была скрыта под текстом, но не под фоновым изображением.

Чтобы повторить ожидаемое В результате должно получиться вот так: контур невидим под контуром, над которым он находится:

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

----------------------------------
|  ----------------------------  |
|  |                          |  |
|  |                          |  |
|  |                          |  |
|  |                          |  |
|  |                          |  |
|  text-----------------------   |
---------------------------------

В приведенном ниже примере текст легко расположить над контуром с помощью базового CSS и смещения контура, чтобы избежать добавления нового внутреннего < /code>, но мне не удается скрыть контур под ним, хотя у него более высокий z-индекс:

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

.square{
position: relative;
height: 300px;
width: 300px;
background-image: url("https://img.freepik.com/foto-gratis/arco-iris-al-final-paisaje-carretera_23-2151596720.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1728259200&semt=ais_hybrid");
background-size: cover;
outline: 1px solid #fff;
outline-offset: -20px;
z-index: -1;
}

.square p{
position: absolute;
z-index: 1000;
bottom: 10px;
margin: 0;
color: #FFF;
padding-left: 20px;
padding-right: 20px;
}

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

Some text

Это было бы легко, если бы мой фон был сплошным цветом, который я мог бы подобрать, но это фотография, поэтому мне нужно будет скрыть контур, не скрывая фотографию. Я пробовал использовать псевдоэлементы :before/:after, но мне не удалось заставить его работать. Возможно ли это вообще, без изменения элементов html и с фоновой фотографией под ним?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/782 ... thout-chan