CSS - testo opaco a bassa div opacità?

StackOverflow https://stackoverflow.com/questions/2401953

  •  18-09-2019
  •  | 
  •  

Domanda

Ho un div con il 60% di opacità, per mostrare una parte di un'immagine di sfondo dietro la div. Perché l'opacità è al 60%, il testo in quella div appare come grigio.

Esiste un modo per ignorare questo livello e far apparire il testo nero?

Qualche consiglio apprezzato.

Grazie.

È stato utile?

Soluzione

Imposta l'opacità sullo sfondo, piuttosto che l'elemento. 

background-color: rgba(255,0,0,0.6);

Qualche tempo fa ho scritto su come raggiungere questo obiettivo in un modo compatibile .

Altri suggerimenti

Ho sperimentato questo in passato sul mio sito web. Di gran lunga il metodo più semplice per ottenere ciò che si vuole è quello di creare un'immagine .PNG single-pixel con la sua opacità impostato a meno del 100% (vale a dire, parzialmente trasparente) e usarlo come immagine di sfondo. Per impostazione predefinita, riempirà l'intero contenente elemento -. Assicurarsi che l'attributo background-repeat CSS è impostata su 'Repeat', se non lo fa

Fare le cose in questo modo non c'è bisogno di impostare la trasparenza sull'elemento che contiene in sé, da qui l'opacità del suo testo sarà inalterato.

Sorprendentemente, c'è solo lo strumento per fare un semi-trasparente a pixel singolo .PNG qui .

L'opacità applica a tutto il div e tutti i suoi figli. Purtroppo, non è possibile annullare l'opacità che, ma solo aggiungere di più. E oltre a questo, non c'è modo per i CSS per selezionare il testo all'interno di un elemento.

Nel vostro caso, la soluzione migliore è di applicare un'immagine di sfondo trasparente (con PNG) al blocco div, un'immagine bianca di un pixel con il 60% di opacità simile.

Un'altra soluzione potrebbe essere quella di utilizzare diverse scatole e posizionamento, come descritto in questo tutorial di Steven York .

questo dovrebbe rispondere a quasi tutte le vostre domande: http: //css-tricks.com/non-transparent-elements-inside-transparent-elements/

La soluzione più semplice sarebbe quella di creare un PNG semi-trasparente con il colore corretto e utilizzarla come immagine di sfondo.

Un'altra soluzione che può essere possibile a seconda del layout è quello di mettere il testo in uno strato separato e la posizione che sopra la parte superiore della parte semitrasparente. Qualcosa di simile potrebbe funzionare: 

<div style="position: relative; background-image: url('your_image.jpg')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

Avresti bisogno di aggiungere le proprie posizioni / dimensioni (il top, left, width e proprietà height) a seconda dei casi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top