Введение
Вывод первый:
Мы устанавливаем цвет фона для тела, но то, что мы на самом деле видим, не обязательно является цветом фона для тела:
- Когда тег HTML не устанавливает цвет фона, мы видим цвет фона на холсте браузера, а не в теле;
- Когда для тега html задан цвет фона, мы видим фактический цвет фона, примененный к телу.
Люди бродят по фронтенду уже несколько лет, и только случайно обнаружили, что прописанные за последние годы цвета фона для тела все «съели» браузер. В этой статье рассматривается принцип фоновой отрисовки специальных элементов (html/body) в CSS, для вас это может быть новый континент, а может быть вы уже знакомы с ним, так что просто...можем пообщаться?
2. Сценарий
Есть страница, отображающая список (переменная высота), а фон должен быть градиентного цвета. Эффект следующий:
- Когда содержимого списка недостаточно для заполнения одного экрана, фон всего экрана заполняется градиентным цветом;
- Когда содержимое списка превышает высоту экрана, вся страница фона заполнена градиентом;
3. Разбивка сценария
Есть много поз, и единственная, которую я предпочитаю, это ты.
PS: Есть много решений для взлома сцены, и следующее решение может заставить нас задуматься о принципе рендеринга html и фона тела.
Шаг 1: Сначала установите цветовой градиент для тела
body{ background: linear-gradient(#FFFAD0,#ffffff); }
Неудивительно, что в градиенте страницы есть ошибка👇
Шаг 2: Установите высоту html на 100% и установите минимальную высоту для тела.
html{ height: 100%;}
body{ min-height: 100%; background: linear-gradient(#FFFAD0,#ffffff); }
И ничего больше, посмотрите OJBK, не было никакой вины!
Внезапно контент постепенно увеличился, превысив высоту одного экрана...👇
Шаг 3: Установите цвет фона HTML
html{ height: 100%; background: red; }
Да, вы правильно прочитали, я сделал html красным! Я должен быть уверен, что такая эффектная операция решила проблему неисправности выше.
Резюме внезапного подъема
Давайте разберем сомнения, с которыми мы столкнулись:
- Сначала мы задаем плавный цвет Body, даже если содержимое превышает один экран, у нас также должен быть слой Body, то есть градиент фона, не должно быть вины!
- Почему установка цвета фона для html-элементов отлично решает эту проблему?
Четыре, принципиальный анализ
В нашей задаче участвуют три объекта: элемент html, элемент body и холст браузера, нам нужно понять механизм рендеринга цвета фона среди них.
The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the element) as described below. However, if no boxes are generated for the element whose background would be used for the canvas (for example, if the root element has display: none), then the canvas background is transparent.
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.
Выше приведено определение w3c фона определенного элемента (корневого элемента), которое резюмируется в следующих двух пунктах:
- CSS отображает цвет фона на холсте документа (холст бесконечен, будем понимать его как холст браузера) в соответствии с корневым элементом (html/body), а область позиционирования цвета фона — это площадь корневой элемент;
- Корневой элемент больше не вытягивается с этим цветом фона, то есть. Используемое значение фона корневого элемента прозрачно.
Основываясь на этих двух пунктах, чтобы ответить на наши предыдущие вопросы:
1. Установите градиентный фон для тела.Когда содержимое превышает один экран, возникает ошибка.
Правда в том, что холст браузера сначала получает стиль фона корневого узла.Поскольку мы не установили html, он получает цвет фона тела, что приводит к тому, что холст браузера также является градиентным фоном;
Во-вторых, область позиционирования цвета фона холста браузера зависит от области корневого элемента, где корневым элементом является html, и мы устанавливаем высоту: 100% в html. Таким образом, холст браузера многократно отображается с фоновым цветом области.
Доказательства с картинками: Установите ширину 50% для html, тогда мы видим dom-контент нашей страницы слева, а холст браузера справа
html{ height: 100%; width: 50%; }
body{ min-height: 100%; background: linear-gradient(#FFFAD0,#ffffff); }
Итак, цвет фона, который мы установили для тела, съедается холстом браузера!
2. Проблема с ошибкой решается установкой цвета фона в html
Мы устанавливаем цвет фона для html, по сути, пусть html берет на себя задачу раскрашивания холстом браузера.В это время значением тела является цвет градиента, который мы установили. Доказательства с картинками:
html{ height: 100%; width: 50%; background: #42b983; }
V. Заключение
Упомянутые выше знания могут быть очень простыми, это всего лишь стандарт для фонового рендеринга в w3c, но многие из нас его игнорируют. Ступайте сейчас в яму и вспомните это вместе.
Ссылаться на