ok скажите, что содержание внутри <body>
составляет 300 пикселей высотой.
Если я установил фон моего <body>
, используя -webkit-gradient
или -moz-linear-gradient
Затем я максимизирую свое окно (или просто сделаю его выше 300 пикселей), градиент будет ровно 300 пикселей высотой (высота содержимого) и просто повторится, чтобы заполнить остальную часть окна.
Я предполагаю, что это не ошибка, так как она одинакова как в webkit, так и в gecko.
Но есть ли способ сделать градиентное растяжение для заполнения окна вместо повторения?
Примените следующий CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Изменить: Добавлено margin: 0;
в декларацию тела для комментариев (Мартин).
Изменить: Добавлено background-attachment: fixed;
в декларацию тела для комментариев (Johe Green).
Что касается предыдущего ответа, настройка html
и body
на height: 100%
не работает, если содержимое нужно прокручивать. Добавление fixed
к фону кажется исправным, что - no need for height: 100%;
например:.
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
background-attachment: fixed
Вот что я сделал для решения этой проблемы... он покажет градиент для полной длины содержимого, а затем просто отменит цвет фона (обычно последний цвет в градиенте).
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');
}
<body>
<h1>Hello world!</h1>
</body>
Я тестировал это в FireFox 3.6, Safari 4 и Chrome, я сохраняю фоновый цвет в теле для любых браузеров, которые по какой-то причине не поддерживают стиль HTML-тега.
Настройка html { height: 100%}
может привести к хаосу с IE. Вот пример (png). Но вы знаете, что отлично работает? Просто установите фон в теге <html>
.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
Фон распространяется на нижнюю часть и не происходит странное поведение прокрутки. Вы можете пропустить все другие исправления. И это широко поддерживается. Я не нашел браузер, который не позволяет применять фон к тегу html. Он отлично подходит CSS и был на некоторое время.:)
Существует много частичной информации на этой странице, но не полная. Вот что я делаю:
<DIV id='container'>
, который я поместил весь свой контент вВот пример:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}
Это было протестировано с помощью IE, Chrome и Firefox на страницах различных размеров и прокрутки.
Я знаю, что опаздываю на вечеринку, но здесь более солидный ответ.
Все, что вам нужно сделать, это использовать min-height: 100%;
, а не height: 100%;
, а ваш фон градиента будет увеличивать всю высоту области просмотра без повторения, даже если содержимое прокручивается.
Вот так:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}
Грязный; возможно, вы могли бы просто добавить минимальную высоту: 100%; к тегам html и телу? Это или, по крайней мере, установить цвет фона по умолчанию, который также является цветом градиента конца.
У меня возникли проблемы с получением ответов здесь для работы.
Мне показалось, что лучше всего исправить полноразмерный div в теле, дать ему отрицательный индекс z и приложить к нему градиент.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>
Здесь полный образец https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
Я использовал этот CSS-код, и он работал у меня:
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
Связанная информация состоит в том, что вы можете создавать свои собственные большие градиенты в http://www.colorzilla.com/gradient-editor/
/Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
вот что я сделал:
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}
прежде чем я плыл по телу, на вершине был пробел, и он показывал цвет фона html. если я удалю bgcolor html, когда я прокручу вниз, градиент будет разрезан. поэтому я поместил тело и установил его положение относительно и ширину до 100%. он работал на сафари, хром, firefox, opera, internet expl.. oh wait.: P
что вы, ребята, думаете?
вместо 100% я просто добавлю несколько pixxel, получил это сейчас, и он работает для всей страницы без разрыва:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
margin:0;
наbody
или я получил пробел внизу моей страницы.