CSS3 градиентный фон на теле не растягивается, а повторяется?
Для строк% является оператором форматирования . Он также отмечает начало спецификатора формата.
Оператор + конкатцирует строку в конце строки с правой стороны +. Оператор% заменит спецификатор формата форматированным способом в расположении спецификатора формата.
Для чисел% является модульным оператором. (Далее)
4 ответа
Примените следующий CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Изменить: Добавлено margin: 0; к объявлению тела в комментариях ( Martin ).
Правка: Добавлено прикрепление фона: исправлено; к объявлению тела в комментариях ( Джохе Грин ).
Грязный; возможно, вы могли бы просто добавить min-height: 100%; в теги html и body? Это или, по крайней мере, установить цвет фона по умолчанию, который также является цветом конечного градиента.
Вот что я сделал, чтобы решить эту проблему... он будет показывать градиент на всю длину содержимого, а затем просто вернется к цвету фона (обычно последний цвет в градиенте).
html { background: #cbccc8; } body { background-repeat: no-repeat; background: #cbccc8; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)); background: -moz-linear-gradient(top, #fff, #cbccc8); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); } Hello world!
Я тестировал это в FireFox 3.6, Safari 4 и Chrome, я сохраняю background-color в body для тех браузеров, которые по какой-то причине не поддерживают стилизацию HTML-тега.
Что касается предыдущего ответа, установка html и body на height: 100%, похоже, не работает, если содержимое нужно прокручивать. Добавление fixed к фону, похоже, исправляет это - нет необходимости в height: 100%;
Например. :
body { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed; }