Почему свойство CSS font-size влияет на свойство background-size в моем приложении rails?

Question

У меня есть приложение https://bootstrapp3.herokuapp.com/ фоновое изображение меняет размер при добавлении текста.После использования функции элемента проверки в браузере кажется, что это свойство font-size влияет на свойство background-size, поскольку, когда я снимаю флажок, связанный с размером шрифта, используя элемент inspect, background-size возвращается кнормальный размер.Почему размер фона меняется?Сравните следующие две страницы из приложения:

Без текста и размера шрифта: https://bootstrapp3.herokuapp.com/pages/page1

Изменение размера фона из-за размера шрифта: https://bootstrapp3.herokuapp.com/pages/consulta

обратите внимание, что единственная разница между страницами - это содержание в представлении.Обе страницы наследуются от макета приложения.

css с размером фона:

body {
    background-image:image-url('gotita.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 51px;
}

элемент font-size:

p {
  font-family: 'Architects Daughter';
  font-size: 20px;
}

Answer 1

Это потому, что вы используете:

background-size: cover;

на элементе body.Высота тела относительно всех дочерних элементов.Таким образом, из-за этого фоновое изображение должно адаптироваться для заполнения высоты.

Чтобы сделать фоновое изображение одинаковым на всех страницах, независимо от содержимого, вы можете удалить фоновое изображение из тега body.и сделайте div внутри тега body с фиксированной позицией, например:

background-image: url(/assets/gotita-7c57f01….png);
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
position: fixed;

Answer 2

Посмотрите на атрибут background-size, который вы присвоили.Этот атрибут может быть описан следующим образом:

• contain: «Масштабирование изображения максимально возможно без обрезки или растяжения изображения.»
• cover: «Масштабирование изображенияизображение должно быть как можно большего размера без растяжения изображения. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не осталось пустого места. "

Источник: MDN Web Docs

Answer 3

Вы установили свойство фона для покрытия.Если вы хотите сделать его независимым, примените фон к пустому элементу div, размер которого вы хотите установить.Затем добавьте текст в другом элементе div, имеющем свою позицию к абсолюту.

Теперь изменение размера шрифта не повлияет на фоновое изображение.