¿Cómo crear un efecto de desvanecimiento con CSS en el fondo con una imagen encima?

Para crear ese aspecto, puede establecer la imagen como el fondo de un div y luego crear un degradado de «negro a claro a negro» en el div para que aparezca en la parte superior de la imagen.

.slideBanner{ background-image: url("../images/Ramsey.jpg"); } .slideBanner{ background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#020202",GradientType=1 ); /* IE6-9 */ } 

Encontré este código de degradado de uno de los muchos generadores de degradado: http://www.colorzilla.com/gradient-editor/

con esta configuración:

En realidad, puede encadenar fondos en CSS, separados por una coma. El primero es el más bajo, el segundo está por encima de eso, et. Entonces, todo lo que necesita hacer es configurar la imagen primero y luego el degradado.

Incluso puede usar modos de fusión en los navegadores modernos para garantizar un buen efecto de fusión en la imagen.

I «Dejaré que usted genere los prefijos de navegador requeridos (el generador vinculado en la otra respuesta es muy bueno para eso).

.slideBanner{ background: url("https://placeimg.com/500/500/nature") 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%); background-blend-mode: multiply; } 

JSfiddle prueba: https://jsfiddle.net/synu8xk1/2/