poner - imagen de fondo css pantalla completa

Oscureciendo una imagen con CSS(en cualquier forma)

Question

Así que he visto bastantes formas de oscurecer las imágenes con CSS, incluidas las que tienen esquinas redondeadas, pero mi problema es diferente.

Digamos que tengo una imagen .png que parece un perrito (solo ve con ella, no tengo ningún buen ejemplo), cuando la coloco en mi página, le doy dimensiones de 100 x 100.

Pero no puedo simplemente superponer algo en él, ni tintar toda la imagen, ya que también teñirá el fondo del perro, lo que se ve feo.

¿Es posible teñir una imagen de forma arbitraria con CSS?

(Supongo que entiendes mi punto, y el código inútil no es necesario)

¡Gracias!

Answer 1

Fácil como

img {
filter: brightness(50%);
}

Answer 2

Haría una nueva imagen de la silueta del perro (negro) y el resto igual que la imagen original. En el html, agregue un div envoltorio con esta silueta como fondo. Ahora, haz la imagen original semi-transparente. El perro se oscurecerá y el fondo del perro permanecerá igual. Puede hacer: desplazar los trucos configurando la opacidad de la imagen original al 100% al desplazarse. ¡Entonces el perro salta cuando le das el mouse!

estilo

.wrapper{background-image:url(silhouette.png);}
.original{opacity:0.7:}
.original:hover{opacity:1}
<div class="wrapper">
<div class="img">
<img src="original.png">
</div>
</div>

Answer 3

Siempre se puede cambiar la opacidad de la imagen, dado que la dificultad de las alternativas es la mejor opción.

CSS:

.tinted { opacity: 0.8; }

Si está interesado en una mejor compatibilidad con el navegador, sugiero leer esto:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Si está lo suficientemente decidido, puede hacer que esto funcione tan atrás como IE7 (¡quién lo sabía!)

Nota: como señala JGonzalezD a continuación, esto solo en realidad oscurece la imagen si el color de fondo es generalmente más oscuro que la imagen en sí. Aunque esta técnica puede ser útil si no desea oscurecer específicamente la imagen, sino que desea resaltarla en el estado de desplazamiento / enfoque / otro estado por cualquier motivo.

Answer 4

Solución de webkit única

Solución rápida, se basa en la -webkit-mask-image . -webkit-mask-image establece una imagen de máscara para un elemento.

Hay algunas trampas con este método:

• Obviamente, solo funciona en navegadores webkit.
• Requiere un envoltorio adicional para aplicar :after psuedo-element (las etiquetas IMG no pueden tener :before / :after pseudo elements, grr)
• Debido a que hay un contenedor adicional, no estoy seguro de cómo usar la función CSS attr(…) para obtener la URL de la etiqueta IMG , por lo que está codificado en el CSS por separado.

Si puede ver más allá de esos problemas, esta podría ser una posible solución. Los filtros SVG serán aún más flexibles, y las soluciones Canvas serán aún más flexibles y tendrán una gama más amplia de soporte (SVG no tiene soporte para Android 2.x).