Примечание. Я буду использовать слово overlay взаимозаменяемо с фоном.
В настоящее время я работаю над режимом руководства и выделяю элементы, чтобы они выделялись из более темного полупрозрачного фона.
Итак, в основном у меня есть селектор для элемента, который я не хочу накладывать, а затем окружаю его полупрозрачными темными divs, имитируя наложение с исключенным элементом.
Мое решение отлично подходит для одного выделенного элемента, но когда это число становится 2+, становится сложно рассчитать, как разместить черные div вокруг этих элементов. И дело в следующем: потребности подсветки будут значительно различаться от страницы к странице - это не так, как эти несколько элементов будут статическими.
Итак, чтобы проиллюстрировать мою проблему:
Здесь вы можете увидеть различные поля, которые нужно поместить на страницу, чтобы окружить Box2 и Box2 полупрозрачными темными div, в основном имитируя эффект наложения с выделенными элементами. Для одного случая, подобного этому, я могу жестко запрограммировать вычисления, и все будет хорошо, но что, если Box1 был выше, чем Box2? Тогда что, если они больше не пересекаются друг с другом по горизонтали? Что делать, если в Box3 требуется подсветка?
В любом случае я не знаю, сколько темных ящиков нужно разместить и где их разместить.
Есть ли какая-нибудь математическая формула, которая помогла бы мне в этом случае? Использование jQuery также возможно, поскольку оно включено в мой проект.
Как мне подойти к этой проблеме и сделать ее расширяемой (несколько ящиков, разные позиции)?