гаразд, скажімо, вміст всередині <body>становить 300 пікс.
Якщо я встановив фон мого <body>використання -webkit-gradientабо-moz-linear-gradient
Тоді я максимізую своє вікно (або просто зроблю його вище 300 пікс.), Градієнт буде рівно 300 пікселів у висоту (висота вмісту) і просто повторюю, щоб заповнити решту вікна.
Я припускаю, що це не помилка, оскільки вона однакова і в веб-кайті, і в гекконі.
Але чи є спосіб зробити градієнт розтягнутим, щоб заповнити вікно, а не повторити?
Відповіді:
Застосуйте таку CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}Редагувати: додано margin: 0;до декларації тіла за коментарями ( Мартін ).
Редагувати: додано background-attachment: fixed;до декларації тіла за коментарями ( Johe Green ).
background-repeatі background-attachmentприходять після ваших backgroundправил. Інакше фон все одно може повторитися.
Що стосується попередньої відповіді, установка htmlі bodyна , height: 100%здається, не працювати , якщо потреби контенту для прокрутки. Додавання fixedдо фону, здається, виправляє це - ніneed for height: 100%;
Наприклад:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}background-attachment: fixed
min-height:100%(у сумісних браузерах)
Я знаю, що я спізнююсь на вечірку, але ось більш солідна відповідь.
Все, що вам потрібно зробити, це min-height: 100%;скоріше використовувати, а height: 100%;ваш градієнтний фон збільшить всю висоту вікна перегляду, не повторюючись, навіть якщо вміст прокручується.
Подобається це:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}Ось що я зробив, щоб вирішити цю проблему ... він покаже градієнт на повну довжину вмісту, а потім просто відновлює колір фону (як правило, останній колір у градієнті).
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%}може завдати шкоди ІЕ. Ось приклад (png). Але ви знаєте, що чудово працює? Просто встановіть свій фон на <html>тег.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}Фон поширюється донизу, і ніякої дивної поведінки прокрутки не відбувається. Ви можете пропустити всі інші виправлення. І це широко підтримується. Я не знайшов браузера, який не дозволяє застосувати фон до html-тегу. Це абсолютно дійсний CSS і був деякий час. :)
htmlале він зупиняється частиною вниз сторінки в моєму випадку. Додавання background-attachment:fixedвирішує проблему. Я бачив, як це трапляється на кількох сайтах, але не вдалося знайти причину.
html, body { height: 100%; }.
На цій сторінці є багато часткової інформації, але не повної. Ось що я роблю:
<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 на сторінках різних розмірів та потреб прокрутки.
Брудні; можливо, ви могли б просто додати мінімальну висоту: 100%; до html та тегів body? Це або принаймні встановити стандартний колір фону, який є і кінцевим кольором градієнта.
У мене виникли проблеми з отриманням відповідей тут, щоб працювати.
Я виявив, що краще працює, щоб виправити повнорозмірний поділ у тілі, надати йому від'ємний 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/
/ Стен
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%. він працював на сафарі, хром, фаєрфокс, оперу, Інтернет-досвід. : P
як ви думаєте, хлопці?
margin:0;наbodyчи інакше я отримав розрив в нижній частині моєї сторінки.