Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как совместить фон блока и фон body? (https://javascript.ru/forum/dom-window/76019-kak-sovmestit-fon-bloka-i-fon-body.html)

Dilettante_Pro 26.11.2018 12:49

Цитата:

Сообщение от i501
Скрипт я привел

Но не полный. Значительная часть функциональности скрипта описана словами.
Что такое img.width/img.height ?

Цитата:

Сообщение от i501
У <body> есть фоновый рисунок.

Как задан?

i501 26.11.2018 14:50

img = new Image() ;
img.src = 'bg.jpg';

У body тот же имж через css

Dilettante_Pro 26.11.2018 16:04

<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: чуть-чуть расползание есть..

i501 26.11.2018 20:20

Всячески плюсую, пан профэссор.
Ваша метода через querySelector намного проще.
Поработаю напильником. Надеюсь получица

i501 28.11.2018 20:56

Все вроде работает (спасибо Dilettante_Pro), но нарисовалась еще одна проблема - при клике на блок
- копируем в блок фоновую картинку
- подгоняем масштаб и положение
- плавно увеличиваем блок. И фон масштабируется вместе с блоком - это проблема. Можно конечно в цикле каждый раз при увеличении на, скажем 1%, вызывать скрипт. Вопрос - как зафиксировать фон блока, что бы он не масштабировался вместе с блоком?

рони 28.11.2018 22:43

: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>

Dilettante_Pro 29.11.2018 10:14

рони,
div.central {
   background-size: inherit;

central.style.backgroundPosition = central.offsetLeft  + "px " + central.offsetTop + "px";

Красиво!:thanks:

i501 29.11.2018 10:50

Круто. инхерит заменил большинство моих велосипедов js
Спасибо. Попробую на реальном коде


Часовой пояс GMT +3, время: 17:15.