Вопрос по css3, background-image, css, html, linear-gradients – Расширение градиента фона по всему телу без прикрепления фона: исправлено

4

Я хочу иметь градиент фона, например

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))

на теле моего документа, который распространяется на всю высоту тела - и прокручивается вместе с телом.

С помощью

background-attachment: fixed;

Я получаю всю высоту (области просмотра), но она, ну, остается неизменной.

background-attachment: scroll;

получает прокрутку, но затем она простирается по высоте окна просмотра.

Есть ли способ получить оба?

Редактировать:

Как указал Болтлок, я получаю ожидаемое поведение сbackground-attachment: scroll ' на базовой тестовой странице.

С


   Content

а также

  body {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
  }

  #stretch {
     height: 2000px;
  }

все работает отлично: градиент распространяется по всему телу (и тело имеет высоту 2000 пикселей) и прокручивает содержимое.

Потом добавляю

  html, 
  body {
     height: 100%;
  }

Это то, что делает основной шаблон, на котором основана страница.

Чтобы тело снова расширилось, добавляю

  height: auto;

и тело вернулось к высоте 2000 пикселей.

Однако градиент остается на высоте HTML - и затем повторяется.

Что мне здесь не хватает?

background-attachment: scroll по умолчанию. Если тело выше, чем область просмотра, достаточно только вашего объявления градиента, если я неЯ что-то упустил. BoltClock
Вы'Правильно: на тестовой странице «голыми костями» градиент расширяется, чтобы заполнить все тело. Нужно посмотреть, что еще в моем CSS вызывает это как побочный эффект. gzost

Ваш Ответ

2   ответа
0

Это (добавить любойbackground-size тебе нужно):

body
{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
      background-attachment: scroll;
    background-size: 100% 900px;
    overflow: hidden;
}

Вот'S скрипка:http://jsfiddle.net/BfH8D/1/

Это результат, который вы хотите?

11

Это происходит из-за того, как градиентные фоны имеют размеры в соответствии с их контейнерами (это включает в себя какhtml а такжеbody), а также расчеты, использованные при определении размеровhtml а такжеbody в соответствии с окном просмотра.

мы на самом деле написали о чем-то похожем раньше в ответДругой вопрос, Ваш немного отличается, поэтому ясначала процитирую соответствующую часть:

Фоны имеютособое поведение применительно кbody и / илиhtml, Когда вы применяете фон кbody не касаясьhtmlполучается, что фон тела распространяется в область просмотра, и этот фон действует так, как если бы он был объявлен:html

Для документов, корневым элементом которых является HTMLHTML элемент или XHTMLhtml элемент: если вычисленное значение ‘изображение на заднем плане' на корневой элемент ‘никто' И его 'фоновый цвет' является 'прозрачный»пользовательские агенты должны вместо этого распространять вычисленные значения свойств фона из этого элемента 'первый HTMLBODY или XHTMLbody дочерний элемент. Используемые значения этогоBODY элемент's свойства фона являются их начальными значениями, а распространяемые значения обрабатываются так, как если бы они были указаны в корневом элементе.

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

Чтобы это исправить, вам нужно сброситьheight значение дляhtml только элемент и назначитьmin-height вместо:

  html {
     height: auto;
     min-height: 100%;
  }

Это снимает ограничение высоты наhtml элемент, позволяющий градиенту растягиваться вместе с содержимым вашей страницы, сохраняя его как минимум таким же высоким, как и область просмотра, если страница не 'не хватает контента (если этоэто не важно, ты ненужно установитьmin-height).

Спасибо! Прежде всего для исправления, но, что более важно, для объяснения того, почему это происходит. gzost

Похожие вопросы