Es importante interpretar el código bien antes de adaptarlo a tu trabajo y si ttienes algo que aportar puedes dejarlo en la sección de comentarios.
Solución:
Simplemente agregue este código a su imagen css
body
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
Referencia: gradiente lineal() – CSS | MDN
ACTUALIZACIÓN: no todos los navegadores son compatibles con RGBa, por lo que debe tener un ‘color alternativo’. Lo más probable es que este color sea sólido (totalmente opaco), por ejemplo:background:rgb(96, 96, 96). Consulte este blog para conocer la compatibilidad con el navegador RGBa.
Use un :después del pseudo-elemento:
.overlay
position: relative;
transition: all 1s;
.overlay:after
content: 'A';
position: absolute;
width: 100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
opacity: 1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.overlay:hover:after
opacity: 0;
Mira mi bolígrafo >
Ajuste background-blend-mode a darken sería la forma más directa y más corta de lograr el propósito, sin embargo, debe establecer un background-color primero para que funcione el modo de mezcla.
Esta también es la mejor manera si necesita manipular los valores en javascript más adelante.
background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;
¿Puedo usar para la mezcla de fondo?
Te invitamos a añadir valor a nuestro contenido aportando tu experiencia en las crónicas.