Я пытаюсь создать своего рода «оконный» эффект, в котором элемент div, расположенный над всеми другими элементами, похож на окно через элемент overlay (цвет фона), расположенный точно под ним.
Вот пример того, что я имею в виду.
Я бы хотел, чтобы текст просматривался так, как если бы вы смотрели в окно.Как это можно сделать без использования изображений?
Решение:
Одним из решений является создание очень широкой полупрозрачной границы.Однако такой подход влияет на общие размеры (или на внешний вид размеров).
Альтернативное решение (которое я использую) - установить полупрозрачную box-shadow сбольшой спред, исключающий необходимость отдельного оверлея div.
#cutout {
box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
}