Usar el degradado css sobre la imagen de fondo

Question

Usar el degradado css sobre la imagen de fondo

He estado tratando de utilizar un degradado lineal en la parte superior de mi imagen de fondo con el fin de obtener un efecto de desvanecimiento en la parte inferior de mi fondo de negro a transparente, pero no parece ser capaz de hacer que se muestre.

He leído otros casos aquí y ejemplos, pero ninguno de ellos funciona para mí. Solo puedo ver el degradado o la imagen, pero no ambos. Aquí está el enlace

Simplemente haga clic en el primer logotipo, ignore ese efecto, lo que estoy tratando está en el cuerpo en el conjunto sitio después de eso.

Este es mi código css:

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

55

css html css3 gradient

Author: Ruslan López, 2013-05-16

Source

4 answers

body {
    margin: 0;
    padding: 0;
    background: url('img/background.jpg') repeat;
}

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

TENGA EN CUENTA: Esto solo se usa webkit, por lo que solo funcionará en navegadores webkit.

Intenta:

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)

9

Author: Ma9ic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 14:25:59

La respuesta aceptada funciona bien. Solo para completar (y ya que me gusta su brevedad), quería compartir cómo hacerlo con compass (SCSS/SASS):

body{
  $colorStart: rgba(0,0,0,0);
  $colorEnd: rgba(0,0,0,0.8);
  @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}

3

Author: Christopher Lörken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-20 19:59:54

#multiple-background{
	box-sizing: border-box;
	width: 123px;
	height: 30px;
	font-size: 12pt;
	border-radius: 7px;		
	background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
	background-repeat: no-repeat, repeat;
	background-position: 5px center, 0px 0px;
    background-size: 18px 18px, 100% 100%;
	color: white;	
	border: 1px solid #e4f6df;
	box-shadow: .25px .25px .5px .5px black;
	padding: 3px 10px 0px 5px;
	text-align: right;
	}

<div id="multiple-background"> Completed </div>

3

Author: Mohammad Faizan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-03 17:59:01

score 104 · Accepted Answer

Ok, lo resolví agregando la url para la imagen de fondo al final de la línea.

Aquí está mi código de trabajo:

.css {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;

}

<div class="css"></div>