html - para - Usar gradiente de CSS sobre la imagen de fondo

gradient css

Question

He intentado usar un degradado lineal en la parte superior de la imagen de fondo para obtener un efecto de desvanecimiento en la parte inferior de mi fondo de negro a transparente, pero parece que no puedo mostrarlo.

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

Simplemente haga clic en el primer logotipo, ignore ese efecto, lo que estoy intentando es en el cuerpo en todo el 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)));
}

Answer 1

La respuesta aceptada funciona bien. Para completar (y como me gusta su brevedad), quería compartir cómo hacerlo con brújula (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"));
}

Answer 2

Ok, lo resolví añadiendo 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(''http://www.skrenta.com/images/.jpg'') 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(''http://www.skrenta.com/images/.jpg'') 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(''http://www.skrenta.com/images/.jpg'') 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(''http://www.skrenta.com/images/.jpg'') 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(''http://www.skrenta.com/images/.jpg'') 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(''http://www.skrenta.com/images/.jpg'') no-repeat;
height: 200px;
}

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

Answer 3

#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>

Answer 4

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 usa webkit, por lo que solo funcionará en los navegadores webkit.

tratar :

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