Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di Vinxi
    Registrato dal
    Jan 2002
    Messaggi
    61

    [CSS] Trasparenza dello sfondo, ma testo ben visibile

    Salve a tutti,

    vorrei sapere se è possibile applicare una trasparenza allo sfondo di un div, ma dare al testo interno una "trasparenza nulla".
    Se faccio così:

    .contenitore {
    background-color: #000000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    }
    .contenitore div {
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }

    e:

    <div class="contenitore">
    <div>testo</div>
    </div>

    Anche il testo ha l'effetto trasparenza, e da bianco passa a grigio.
    Come posso fare?

    Grazie

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    è un comportamento dei browser

    quando assegni un'opacità ad un elemento tutto ciò che vi si trova dentro non potrà assumere opacità maggiore rispetto al contenitore stesso.

    quindi

    <div class="contenitore">
    <div>testo</div>
    </div>

    diventa

    <div class="contenitore">
    </div>
    <div id="contenuto">testo</div>

    e poi sposti il div "contenuto" in modo che sia visualmente posizionato "sopra" il div "contenitore" (setta i magini, tipo di posizionamento ecc..)

    in questo modo l'opacità non ne risente
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di Vinxi
    Registrato dal
    Jan 2002
    Messaggi
    61
    Ti ringrazio, ma non ho risolto totalmente.

    Sono riuscito a posizionare bene il div del testo, ma il problema è che non riesco a sapere a priori l'altezza del div contenitore perché appunto il testo ha un altezza sconosciuta.

    Come posso fare a far comunque rientrare il testo nel div contenitore?
    Ho provato a mettere height: 100% al contenitore, ma giustamente si allunga fino alla fine dello schermo.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.