Scurire l'immagine

  • Creatore Discussione Creatore Discussione Gae
  • Data di inizio Data di inizio

Gae

Utente Attivo
15 Mar 2021
55
4
8
Salve, nell'header ho un'immagine abbastanza chiara con il logo e il menù
Il colore delle voci del menù é biando e non é ben leggibile in quanto la foto é chiara
Ho visto che si può scurire con opacity ho provato ma sbaglio qualcosa, posto il codice
<section class="imgScura">
<a href=''> <img src="PalestraGes/media/Sito/Team.jpg" alt="TEAM" title="Team"> </a>
</section>

.imgScura {
position: relative;
}
.imgScura:before {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0.5%;
}
 
Ciao, non credo che la tua, di agire sull'opacity, (trasparenza) dell'immagine sia la soluzione migliore: infatti tu non vuoi rendere più o meno trasparente l'immagine ma solamente scurirla, giusto? Tempo fa ho avuto un problema simile che ho risolto in questo modo: ho ceato un div delle stesse dimensioni della foto, ho impostato il colore di sfondo a nero, tramite position, top e left l'ho posizionato sulla foto e quindi ho agito sulla trasparenza di quest'ultimo, devi fare solo un po' di prove. Spero di esserti stato utile, fammi sapere come va.

Zorro
PS Con opacity non ci vuole %
 
Ciao, non credo che la tua, di agire sull'opacity, (trasparenza) dell'immagine sia la soluzione migliore: infatti tu non vuoi rendere più o meno trasparente l'immagine ma solamente scurirla, giusto? Tempo fa ho avuto un problema simile che ho risolto in questo modo: ho ceato un div delle stesse dimensioni della foto, ho impostato il colore di sfondo a nero, tramite position, top e left l'ho posizionato sulla foto e quindi ho agito sulla trasparenza di quest'ultimo, devi fare solo un po' di prove. Spero di esserti stato utile, fammi sapere come va.

Zorro
PS Con opacity non ci vuole %

Grazie del consiglio.

Farò delle prove
 
Ciao, per rendere l'elemento immagine più chiaro o più scuro puoi applicargli direttamente la funzione brightness() attraverso la proprietà filter css.
Ti invito eventualmente a consultare la documentazione online o fare qualche ricerca in merito.
Buon proseguimento.
 
  • Like
Reactions: zorro

Discussioni simili