tipos - fondo degradado transparente css

Fondo de degradado fijo con css

Question

Me gustaría que mi página tenga un fondo degradado que fluya de arriba a abajo. Quiero que el fondo actúe como una imagen fija, ya que el degradado se extiende desde la parte superior de la ventana del navegador actual hasta la parte inferior y tiene el mismo aspecto a medida que se desplaza hacia arriba y hacia abajo de la página. En otras palabras, no se repite cuando se desplaza. Se mantiene fijo en su lugar.

Entonces, lo que quiero es esto:

y después de desplazarse hacia abajo, ves esto

Tenga en cuenta que el degradado se ve exactamente igual en la parte inferior de la página que en la parte superior. Va desde el amarillo completo al rojo completo.

Lo mejor que puedo hacer es hacer que el degradado abarque todo el contenido de la página en lugar de solo la parte visible, como esta:

y el fondo se ve así:

Observe que el gradiente se extiende a lo largo del contenido, no solo lo que está visible actualmente. Por lo tanto, en la parte superior de la página se ve principalmente amarillo y en la parte inferior de la página se ve principalmente rojo.

Supongo que podría resolver esto usando una imagen estirada en el plano y repetida en el plano x, pero preferiría no hacer esto, ya que si es posible, el estiramiento de la imagen podría llevar a un gradiente de aspecto no granular. ¿Se puede hacer esto de forma dinámica con solo CSS?

Answer 1

Otra forma de hacerlo (con imagen real):

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; 
}

Answer 2

Si desea hacer esto usando gradientes CSS3, intente agregar lo siguiente al selector.

Entonces, por ejemplo, si está aplicando degradados a #background , luego agregue esto después del gradiente de CSS. Importante : debe agregar esto después de las propiedades de fondo.

background-attachment: fixed;

w3schools.org: propiedad de conexión de fondo de CSS

Su código completo podría verse así:

#background {
  background: #1e5799;
  background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  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: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -ms-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;
}

Answer 3

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/

Dependiendo de los buscadores que admita, puede o no desear una imagen alternativa. De lo contrario, es posible que desee incluir el filter y la -ms-filter para permitir IE 6-8. Incluso sin esto o una imagen, retrocederá al background-color