Scurire un'immagine con CSS (In qualsiasi forma)

Question

Quindi ho visto alcuni modi per scurire le immagini con i CSS, compresi quelli con angoli arrotondati, ma il mio problema è diverso.

Diciamo che ho un'immagine .png che assomiglia ad un cagnolino (basta che ci sia, non ho buoni esempi), quando lo metto sulla mia pagina, gli do le dimensioni di 100 x 100

Ma non riesco a sovrapporre qualcosa su di esso, né a colorare l'intera immagine, perché anche lo sfondo del cane sarà tinto, il che sembra brutto.

È possibile colorare un'immagine di forma arbitraria con i CSS?

(Sto assumendo si capisce il mio punto, e il codice inutile, non è necessario)

Grazie!

Answer 1

È sempre possibile modificare l'opacità dell'immagine, data la difficoltà di qualsiasi alternativa questo potrebbe essere l'approccio migliore.

CSS:

.tinted { opacity: 0.8; } 

Se siete interessati a una migliore compatibilità del browser, vi suggerisco di leggere questo:

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

Se sei determinato a sufficienza si può ottenere questo lavoro, per quanto indietro come IE7 (chi lo sapeva!)

Nota: Come JGonzalezD indica di seguito, questo onl y oscura effettivamente l'immagine se il colore dello sfondo è generalmente più scuro dell'immagine stessa. Sebbene questa tecnica possa essere ancora utile se non si desidera scurire l'immagine in modo specifico, è preferibile evidenziarla su hover/focus/altro stato per qualsiasi motivo.

Answer 2

Webkit only solution

Soluzione rapida, si basa sulla proprietà -webkit-mask-image. -webkit-mask-image imposta un'immagine maschera per un elemento.

Ci sono un paio di grattacapi con questo metodo:

• Ovviamente, funziona solo nei browser Webkit
• Richiede un involucro supplementare per applicare la pseudo-elemento :after (IMG tag non possono avere :before/:after pseudo elements, grr)
• Poiché esiste un ulteriore wrapper, non sono sicuro di come utilizzare la funzione CSS attr(…) per ottenere l'URL del tag IMG, quindi è codificato nel CSS separatamente.

Se riesci a guardare oltre questi problemi, questa potrebbe essere una possibile soluzione. I filtri SVG saranno ancora più flessibili e le soluzioni Canvas saranno ancora più flessibili e avranno una più ampia gamma di supporto (SVG non supporta Android 2.x).

Answer 3

Vorrei creare una nuova immagine della sagoma del cane (nero) e il resto dell'immagine originale.In html, aggiungi un div wrapper con questa silhouette come sfondo. Ora, rendere l'immagine originale semitrasparente. Il cane diventerà più scuro e lo sfondo del cane rimarrà lo stesso. Puoi eseguire: trucchi al passaggio del mouse impostando l'opacità dell'immagine originale al 100% al passaggio del mouse. Poi il cane spunta quando lo passi sopra con il mouse!

stile

.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 4

Facile come

img { 
    filter: brightness(50%); 
}