Как совместить фон блока и фон 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 (точно не получается, небольшая разница есть). Скрипт я привел. Причем смещение вызвано масштабированием. //блок плавно увеличивается, перекрывает соседние блоки и появляется описание Неточность явно в вычислениях коэффициента масштабирования Встречный вопрос - можно ли напрямую получить размеры отрендеренной картинки фона. Без вычислений через размеры окна и размеры исходного фонового файла? |
Цитата:
Что такое img.width/img.height ? Цитата:
|
img = new Image() ;
img.src = 'bg.jpg'; У body тот же имж через css |
<style>
body {
background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
background-size: 100%;
}
div.central {
position:fixed;
background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
opacity:1;
top:40px;
left:200px;
width:300px;
border:1px solid black;
z-index:2;
}
div.left {
position:fixed;
top:50px;
left:50px;
width:300px;
border:1px solid black;
z-index:1;
}
</style>
<body>
<div class = "left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class = "central">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
<script>
var central = document.querySelector("div.central");
central.style.backgroundPosition = "-" + (central.offsetLeft + 1) + " -" + (central.offsetTop + 1);
central.style.backgroundSize = ((document.querySelector("body").clientWidth / central.clientWidth) * 100) + "%";
</script>
+ 1 это толщина бордера PS: чуть-чуть расползание есть.. |
Всячески плюсую, пан профэссор.
Ваша метода через querySelector намного проще. Поработаю напильником. Надеюсь получица |
Все вроде работает (спасибо Dilettante_Pro), но нарисовалась еще одна проблема - при клике на блок
- копируем в блок фоновую картинку - подгоняем масштаб и положение - плавно увеличиваем блок. И фон масштабируется вместе с блоком - это проблема. Можно конечно в цикле каждый раз при увеличении на, скажем 1%, вызывать скрипт. Вопрос - как зафиксировать фон блока, что бы он не масштабировался вместе с блоком? |
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
body {
background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
background-size: 100%;
background-position: 0 0;
transition: 2s;
}
div.central {
background-size: inherit;
position:fixed;
background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat ;
opacity:1;
top:140px;
left:200px;
width:300px;
height: 130px;
border:1px solid black;
z-index:2;
overflow: hidden;
transform: scale(0);
transition: transform 5s;
}
div.left {
position:fixed;
top:50px;
left:50px;
width:300px;
border:1px solid black;
z-index:1;
}
.central.big {
transform: scale(1);
}
</style>
<body>
<div class = "left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class = "central">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
<script>
var central = document.querySelector("div.central");
central.style.backgroundPosition = central.offsetLeft + "px " + central.offsetTop + "px";
window.setTimeout(function() {
central.classList.add("big")
}, 2000)
window.setTimeout(function() {
document.body.style.backgroundPositionX = "300px";
}, 15000)
</script>
</body>
</html>
|
рони,
div.central {
background-size: inherit;
central.style.backgroundPosition = central.offsetLeft + "px " + central.offsetTop + "px"; Красиво!:thanks: |
Круто. инхерит заменил большинство моих велосипедов js
Спасибо. Попробую на реальном коде |
| Часовой пояс GMT +3, время: 05:42. |