No dudes en compartir nuestra web y códigos con tus amigos, danos de tu ayuda para aumentar nuestra comunidad.
Solución:
Fácil como
img
filter: brightness(50%);
Siempre puede cambiar la opacidad de la imagen, dada la dificultad de las alternativas, este podría ser el mejor enfoque.
CSS:
.tinted opacity: 0.8;
Si está interesado en una mejor compatibilidad del navegador, le sugiero que lea esto:
Si está lo suficientemente determinado, puede hacer que esto funcione desde IE7 (¡quién lo diría!)
Nota: Como JGonzalezD señala a continuación, esto solo oscurece la imagen si el color de fondo es generalmente más oscuro que la imagen misma. Aunque esta técnica aún puede ser útil si no desea oscurecer específicamente la imagen, sino que desea resaltarla al pasar el mouse/enfocar/otro estado por cualquier motivo.
si quieres solo el background-image para verse afectado, puede usar un degradado lineal para hacer eso, así:
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);
Si lo quiere más oscuro, aumente el valor alfa; de lo contrario, lo quiere más claro, haga que el alfa sea más bajo
Si guardas algún recelo y disposición de regenerar nuestro enunciado eres capaz de añadir una crítica y con placer lo estudiaremos.