Come ridurre la luminosità dell’immagine nei CSS

Voglio diminuire la luminosità dell’immagine nei CSS. Ho cercato molto ma tutto ciò che ho è su come cambiare l’opacità, ma ciò rende l’immagine più brillante. Qualcuno può aiutarmi ?

La funzione che stai cercando è il filter . È in grado di eseguire una gamma di effetti immagine, inclusa la luminosità:

 #myimage { filter: brightness(50%); } 

Puoi trovare un utile articolo a riguardo qui: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Un altro: http://davidwalsh.name/css-filters

E, soprattutto, le specifiche del W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Si noti che questo è qualcosa che di recente è entrato nel CSS come caratteristica. È disponibile, ma un gran numero di browser non lo supporta ancora, e quelli che lo supportano richiederanno un prefisso venditore (es. -webkit-filter: -moz-filter , ecc.).

È anche ansible eseguire effetti di filtro come questo usando SVG. Il supporto SVG per questi effetti è ben consolidato e ampiamente supportato (le specifiche del filtro CSS sono state prese dalle specifiche SVG esistenti)

Si noti inoltre che questo non deve essere confuso con lo stile di filter proprietario disponibile nelle vecchie versioni di IE (anche se posso prevedere un problema con lo scontro di namespace quando il nuovo stile abbassa il prefisso del fornitore).

Se nessuna di queste funzioni per te, potresti comunque utilizzare la funzione di opacity esistente, ma non il modo in cui stai pensando: crea semplicemente un nuovo elemento con un solido colore scuro, posizionalo sopra l’immagine e dissolvilo usando opacity . L’effetto sarà dell’immagine dietro l’oscurità.

Finalmente puoi controllare il supporto del browser del filter qui .

Spero possa aiutare.

OP vuole diminuire la luminosità, non aumentarla. L’opacità rende l’immagine più luminosa, non più scura.

Puoi farlo sovrapponendo un div nero sull’immagine e impostando l’opacità di quel div.

  Normal:

Decreased brightness:

DEMO

In breve, posiziona il nero dietro l’immagine e abbassa l’opacità. Puoi farlo avvolgendo l’immagine all’interno di un div e quindi abbassando l’opacità dell’immagine.

Per esempio:

   

Ecco un JSFiddle.

Potresti usare:

 filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); 

Con CSS3 possiamo facilmente regolare un’immagine. Ma ricorda che questo non cambia l’immagine. Visualizza solo l’immagine regolata.

Vedere il seguente codice per ulteriori dettagli.

Per rendere un’immagine grigia:

 img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); } 

Per dare un aspetto color seppia:

  img { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); } 

Per regolare la luminosità:

  img { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); } 

Per regolare il contrasto:

  img { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); } 

Per sfocare un’immagine:

  img { -webkit-filter: blur(10px); -moz-filter: blur(10px); } 

L’ho trovato oggi. Mi ha davvero aiutato. http://www.propra.nl/playground/css_filters/

Tutto ciò che serve è aggiungere questo al tuo stile css .:

 div {-webkit-filter: brightness(57%)} 

È ansible utilizzare i filtri CSS, di seguito e l’esempio per il kit web. per favore guarda questo esempio: http://jsfiddle.net/m9sjdbx6/4/

  img { -webkit-filter: brightness(0.2);} 
 -webkit-filter: brightness(0.50); 

Ho questa fantastica soluzione: https://jsfiddle.net/yLcd5z0h/

prova questo se hai bisogno di convertire l’immagine nera in bianco:

 .classname{ filter: brightness(0) invert(1); } 

Piace

 .classname { opacity: 0.5; }