Come diminuire la luminosità dell'immagine in CSS

106

Voglio diminuire la luminosità dell'immagine in CSS. Ho cercato molto, ma tutto quello che ho è come cambiare l'opacità, ma questo rende l'immagine più luminosa. Qualcuno può aiutarmi ?

css

— Shadi
fonte

puoi usare l'opacità dell'attributo

— Satinder singh

L'ho usato ma aumenta la luminosità ...

— Shadi

la risposta accettata funziona bene, ma c'è anche un nuovo filtereffetto standard CSS di cui vorrai essere a conoscenza per il futuro. Vedi la mia risposta.

— Spudley

1

@shady, puoi gentilmente rivisitare questa domanda per contrassegnare come corretta una delle risposte che offrono soluzioni che coinvolgono i filtri. La risposta che hai contrassegnato come corretta sarebbe il modo per farlo, diciamo 2006.

— Wes Modes

176

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

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

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

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

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

Nota che questo è qualcosa che solo di recente è entrato nei CSS come funzionalità. E 'disponibile, ma un gran numero di browser là fuori non lo sosterrà ancora, e quelli che lo fanno sostegno sarà necessario un prefisso di fornitore (ad esempio -webkit-filter:, -moz-filterecc).

È anche possibile filtrare effetti 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 filterstile proprietario disponibile nelle vecchie versioni di IE (anche se posso prevedere un problema con l'interferenza dello spazio dei nomi quando il nuovo stile elimina il prefisso del fornitore).

Se niente di tutto ciò funziona per te, puoi comunque utilizzare la opacityfunzionalità esistente , ma non nel modo in cui pensi: crea semplicemente un nuovo elemento con un colore scuro solido, posizionalo sopra la tua immagine e sfumalo usando opacity. L'effetto sarà dell'immagine dietro l'oscuramento.

Finalmente puoi controllare il supporto del browser filter qui .

— Spudley
fonte

32

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.

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

DEMO

— sachleen
fonte

24

L'opacità non rende nulla di più luminoso o più scuro. Cambia la trasparenza dell'oggetto. Se questo ha o meno l'effetto di rendere qualcosa di più luminoso o più scuro dipenderà dal colore di sfondo dietro l'elemento di cui stai modificando l'opacità. Contrariamente a quanto dici, puoi rendere qualcosa di più scuro aumentando l'opacità se lo metti su uno sfondo nero. Un'immagine trasparente al 99% su uno sfondo nero apparirà quasi nera. Non vedo quindi perché è necessario un div overlay separato. Puoi semplicemente impostarlo su un BG nero. Ad esempio: jsbin.com/isemec/1/edit

— NickG

@ NickG ho detto che assumendo sfondo bianco. Quello che hai fatto è la stessa cosa del mio codice, solo che ho messo una sovrapposizione nera semitrasparente sopra l'immagine e hai uno sfondo nero opaco con un'immagine semitrasparente in cima.

— sachleen

17

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

Per esempio:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

Ecco un JSFiddle.

— JL235
fonte

15

Potresti usare:

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

— Nahomy Atias
fonte

9

Questa politica di "lanciamo prefissi per ogni evenienza" è sbagliata. In primo luogo, se Opera lo supporta mai, non lo avrà -o-(Opera usa Webkit / Blink ora), in secondo luogo, Firefox è passato direttamente a senza prefisso filter, terzo, hai l'ordine sbagliato, senza prefisso dovrebbe essere l'ultimo, quarto, la sintassi per IE -ms-filterè diversa ( progid:DXImageTransform, ecc.), quinto, la sintassi per Firefox è diversa e richiede SVG ( vedi documenti ), sesto, è improbabile che le nuove funzionalità siano prefissate perché i fornitori si sono resi conto di quanto fosse pessima l'idea

— Camilo Martin

5

@CamiloMartin, avresti dovuto fornire una risposta più completa a questa domanda poiché non ha ancora ricevuto una risposta completa.

— Modalità Wes

-webkit-filter: luminosità () / -webkit-filter: contrast () funziona. Questa è una risposta appropriata alla domanda.

— Shilpa

puoi usarlo in sass mixin come questo: gist.github.com/johnferrie/3836468

— Erez Lieberman

6

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

Vedere il codice seguente per ulteriori dettagli.

Per rendere un'immagine grigia:

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

Per dare un aspetto 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);
  }

— Raj Sharma
fonte

1

Si prega di non pubblicare la stessa identica risposta a più domande: o non è adatta a tutte o le domande sono duplicati che dovrebbero essere contrassegnati / chiusi come tali.

— kleopatra

3

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

Tutto ciò di cui hai bisogno è aggiungerlo al tuo stile CSS .:

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

— Spirito in movimento
fonte

2

Se hai un'immagine di sfondo, puoi farlo: Imposta un gradiente rgba () sull'immagine di sfondo.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

Espandi lo snippet

— Sébastien Gicquel
fonte

eccellente. Avevo bisogno di una soluzione per scurire un'immagine di sfondo e tutte le altre risposte scurirebbero l'intero div.

— prossimo

1

Puoi usare filtri CSS, di seguito ed esempio per web-kit. guarda questo esempio: http://jsfiddle.net/m9sjdbx6/4/

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

— GibboK
fonte

0

-webkit-filter: brightness(0.50);

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

— Prashant Ghimire
fonte

0

prova questo se hai bisogno di convertire l'immagine nera in bianca:

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

— rizo
fonte

-3

Piace

.classname
{
 opacity: 0.5;
}

— Satinder singh
fonte

grazie ma che aumentando la luminosità non diminuendola !!

— Shadi

Dipende dal colore di sfondo.

— apocalisse

giusto @zgnilec dipende dal colore di sfondo ... se lo metti nero la luminosità dell'immagine sarà diminuita

— Shadi

questo non funziona per aumentare la luminosità per più del 100%, l'opacità può arrivare solo a 1

— Javis Perez

Essendo una persona che non parla inglese, in realtà volevo cercare "opacità" e mi è stata comunque proposta questa risposta. Anche se questa risposta non risponde alla domanda, è bene sapere che opacityaumenta la luminosità. ;)