Размер body. Как это работает?

163
21 июня 2022, 03:20

Я хочу сделать множественный фон (вода и рыба). Рыбе хочу задать определенное местоположение, например background-position: right center. Но замечаю, что это свойство не будет работать, пока не будут заданы width/height. Я задаю body width: 100%, a height: 500px. Но тем не менее height у меня отображается больше, чем указано. Почему так? И безопасно ли так делать, чтоб указать рыбе четкое местоположение.

.body { background-image: url(https://i.postimg.cc/85M83Lxc/f383ffc7d288687b64ea6ee11b3494c6.jpg), url(https://i.postimg.cc/fLhqVpgW/depositphotos-24216433-stock-photo-seamless-water-texture.jpg); background-size: 100px, auto; background-repeat: no-repeat, repeat;background-position: right center, 0 0; width: 100%; height: 500px;}

Вот мой код

*Под безопасно я имею в виду не вызовет ли такой способ каких-то лагов в будущем, когда на странице будет больше элементов и контента.

Answer 1

HTML vs. BODY: Фоновое противостояние

Очень расплывчатое описание проблемы и конечного результата. Из того, что понял - Вам нужно чётко зафиксировать позицию одного из слоёв фона ("рыбка", в данном случае), чтобы независимо от размеров окна или количества контента, этот слой всегда оставался на заданной позиции (т.е. справа по центру).

Тут нужно прояснить несколько моментов:

  • <body> зависит от размеров окна и контента (width по умолчанию 100%). Следовательно, высота может меняться (если не указаны явно height и overflow), а из-за того, что позиции слоя присвоены относительные значения (right center = 100% 50%), они рассчитываются исходя из размеров элемента <body>. Это верно, если у <body> свойство background-attachment для нужного слоя имеет значение scroll (значение по умолчанию);
  • При background-attachment: fixed;, значения позиции слоя рассчитываются исходя из размеров видимой части страницы (окна просмотра). При этом размеры элементов <body> и <html> игнорируются, а всё выходящее за границы этих элементов обрезается.
  • Но... Если задать множественный фон непосредственно элементу <html> и указать background-attachment: fixed; для нужных слоёв, то влияние на позиции этих слоёв будут оказывать только размеры окна просмотра. Изображения при этом не обрезаются. (При этом не забывайте явно указывать background-color для <body> - Важно! Именно прозрачный (например: #0000, rgba(0,0,0,0) или transparent).

Запустите пример ниже. С помощью ползунка в верхнем левом углу, измените размер шрифта, чтобы содержимое начало растягивать страницу.

/* Only for demo */ document.body.insertAdjacentHTML('afterbegin','<input type="range" min=0.1 max=5.0 step=0.1 value=3.0 oninput="document.documentElement.style.setProperty(`--fs`,`${this.value}em`);" style="position: fixed;left:0;top:0;filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 7px #000);">');
html {
  background-color: #0ff;
  background-attachment: fixed;
  background-image: url(https://i.stack.imgur.com/jdv5m.jpg), url(https://i.stack.imgur.com/pRBsZ.jpg);
  background-size: 300px auto, auto auto;
  background-position: right center, 0 0;
  background-repeat: no-repeat, repeat;
  box-shadow: inset 0 0 0 5px green;
}
body {
  margin: 0;
  background-color: transparent;
  background-attachment: fixed, scroll;
  background-image: url(https://i.stack.imgur.com/ZlkJd.jpg), url(https://i.stack.imgur.com/izWcv.png);
  background-size: 100px auto, 200px auto;
  background-position: right center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 3px red;
}
p {
  font-size: var(--fs, 3em);
  box-shadow: inset 0 0 0 1px yellow;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Это самый средний параграф.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>

Если захотите что-то уточнить, то напишите в комментарии под этим ответом.

Answer 2

Особенность фона, заданного для body - document.body и html - document.documentElement, в том, что он на самом деле задаётся для document.

html {
  background-image: url(http://via.placeholder.com/250x250/33ff99/555555?text=text);
  background-color: blue;
  background-repeat: no-repeat;
  border: 1px solid coral;
}

Соответственно позиция фона считается от него.

Answer 3

Вы можете вот так делать и не думать о размерах body и height

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(https://i.postimg.cc/85M83Lxc/f383ffc7d288687b64ea6ee11b3494c6.jpg), url(https://i.postimg.cc/fLhqVpgW/depositphotos-24216433-stock-photo-seamless-water-texture.jpg);
  background-size: 100px, auto;
  background-repeat: no-repeat, repeat;
  background-position: right center, 0 0;
}
p {
  font-size: 3em;
  margin: 1em 0;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime labore possimus inventore, aut saepe et magnam! Blanditiis tenetur veniam adipisci praesentium veritatis voluptate quibusdam quo id? Veritatis fugit doloremque ab.</p>

READ ALSO
PyQt5 Печать HTML документов
HTML

PyQt5 Печать HTML документов

Друзья, кажется, я обыскал весь интернет, но так и не нашёл, какие сейчас есть способы печати HTML документов в PyQt5 ?

 270
При наведении курсора картинка меняется на карту
HTML

При наведении курсора картинка меняется на карту

Подскажите пожалуйста, как реализовать смену картинки на карту при наведении курсора? Наверное, это делается с помощью hover, возможно я не правНужно...

 240
Беда с высотой картинок на iOS
HTML

Беда с высотой картинок на iOS

Друзья, помогите решить проблему с авто высотой картинок для iOSУ меня есть элемент у которого динамичная ширина, т

 247
Проверка регулярного выражения
HTML

Проверка регулярного выражения

Нужно построить регулярное выражение для проверки номера телефона (вроде как написал) и внести дополнения в функцию CheckData()Тоесть по нажатию...

 173