Подтвердить что ты не робот

Исправлен градиентный фон css

Я хотел бы, чтобы моя страница имела фон градиента, текущий сверху вниз. Я хочу, чтобы фон работал как фиксированное изображение в том, что градиент простирается от верхней части текущего окна просмотра браузера до конца и выглядит так же, как вы просматриваете вверх и вниз по странице. Другими словами, он не повторяется при прокрутке. Он остается фиксированным на месте.

Итак, я хочу:

enter image description here

и после прокрутки вниз вы видите enter image description here

Обратите внимание, что градиент выглядит точно так же в нижней части страницы, как и сверху. Он идет от полного желтого до полного красного.

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

enter image description here

а нижняя часть выглядит так: enter image description here

Обратите внимание, что градиент охватывает всю длину содержимого, а не только то, что в данный момент видно. Поэтому в верхней части страницы вы видите в основном желтый цвет, а внизу страницы вы видите в основном красный цвет.

Я предполагаю, что могу решить это, используя изображение, растянутое в плоскости y, и повторяющееся в плоскости x, но я бы предпочел не делать этого, потому что, если это возможно, так как растяжение изображения может привести к блочному, гранулярному градиенту. Можно ли это сделать динамически с помощью только CSS?

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы хотите сделать это с помощью CSS3-градиентов, попробуйте использовать свойство background-attachment

Например, если вы применяете свои градиенты к #background, то добавьте это после CSS-градиента.

background-attachment: fixed;

Примечание: вы должны добавить background-attachment после свойств фона.

Весь ваш код может выглядеть так:

#background {
  background: #1e5799;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:    -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:     -ms-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:      -o-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:         linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  background-attachment: fixed;
}

Ответ 2

html {
  height: 100%;
  /* fallback */
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

В зависимости от того, какие браузеры вы поддерживаете, вы можете или не захотите вернуть изображение. Если нет, вы можете включить синтаксис filter и -ms-filter вместо IE 6-8. Даже без этого или изображения он будет возвращаться к background-color

Ответ 3

Я полагаю, использование псевдоэлемента ::before также может быть хорошим вариантом, спасибо за background-attachment @ScottA 👍 отличный

article {position:relative}
article:before {
  content: '';
  height:100vh;
  width:100%;
  position: fixed;
  top: 0;
  z-index:-1;
  background: #1e5799;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:    -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:     -ms-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:      -o-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:         linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  
}
<article> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Ответ 4

Другой способ сделать это (с фактическим изображением):

body {
  background-attachment: local; // or 'fixed' here
  background-image: url(fancy.jpg);
  background-size: 100% 100%;
  overflow:auto;
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0; 
}