Как совместить фон блока и фон body?
Есть примерно такая разметка
<body> <div class="Item1" id="Item1"><a href="#">О компании</a></div> <div class="Item2" id="Item2"><a href="#">Наши услуги</a></div> У <body> есть фоновый рисунок. В момент нажатия на ссылку блоку со ссылкой присваивается фон <body> с тем же масштабом. Масштаб определяется так var realWidth = $(window).width() > $(window).height() ? img.width/img.height * $(window).height() :$(window).width(); var scaleWidth = realWidth/$(window).width(); Фон блока подгоняется через background-size и background-position. Все вроде работает, но есть несовпадение на примерно +процент и в итоге небольшое смещение Как добиться полного совпадения? |
макет или ссылку
|
Макет на бумаге
Вложений: 1
Набросал примерно. По клику на item1 (например) фон <body> назначается div и также позиционируется. Примерно вот так.
|
Уточнение - фон на весь экран и соответственно масштабируется
|
i501,
а если блоку задавать не фон, а стиль background: inherit; ? То есть фон у блока станет прозрачным (будет фон из body). |
При клике...
При клике на ссылку div увеличивается, появляется описание и частично перекрываются соседние дивы. Перекрытие соседних дивов закрыто фоном, который совпадает с body.
Пардон, отредактировал. Было "не закрыто". Ошибка |
i501,
сделайте макет! |
Вложений: 1
Наложение дивов должно выглядить примерно так
|
i501,
Макет - имеется в виду не картинка, а минимальный скрипт, демонстрирующий требуемую функциональность и возникающие проблемы. |
//Клик по item1
//item1 назначается фон body //получаем размеры файла фона, размеры окна и вычисляем коэф. масштабирования //зная положение item1 позиционируем фон блока в соответствие с фоном body (точно не получается, небольшая разница есть). Скрипт я привел. Причем смещение вызвано масштабированием. //блок плавно увеличивается, перекрывает соседние блоки и появляется описание Неточность явно в вычислениях коэффициента масштабирования Встречный вопрос - можно ли напрямую получить размеры отрендеренной картинки фона. Без вычислений через размеры окна и размеры исходного фонового файла? |
| Часовой пояс GMT +3, время: 09:55. |