opacity al div e non al testo

  • Creatore Discussione Creatore Discussione Vicar
  • Data di inizio Data di inizio

Vicar

Utente Attivo
15 Gen 2010
48
0
0
Salve ragazzi,
vi faccio vedere il mio codice e poi vi spiego il problema:

Codice:
<div id="content">ciao</div>

Codice:
#content{
    background:#000000;
    opacity:0.6;
}

Questo è il mio problema semplificato, se faccio in questo modo lo sfondo è trasparente in modo corretto ma non solo, anche il contenuto al suo interno è trasparente, come evito questo problemino?

Grazie per le risposte!
 
potresti dare un colore al testo che non sia nero

Codice:
#content{
    background:#000000;
    opacity:0.6;
    color:#FFF;
}
 
No! Invece funziona ed è un'ottima idea. Bravo criric

sfondo-trasp.jpg

questo è l'esempio di criric
ho solo modificato leggermente il codice

#content{
background:#000000;
opacity:0.6;
color:#FFFFFF;
}

e adesso tocca a me.

Una piccola premessa prima:
quando si crea un div trasparente tutto ciò che esso contiene è ovviamente trasparente.
Per ovviare al problema basta utilizzare un diverso colore come sfondo.
Ad esempio nel nostro caso il nero... con l'effetto opacity diventa grigio
quindi basta un po di intuito e dare al background il colore grigio e al testo il nero
basta un po di logica cari sorcetti adorati.

sfondo-trasp-max.jpg


esempio di max
http://max400.netne.net/opacity-al-div-e-non-al-testo-max.html

al div gli ho dato il colore grigio... al testo il colore nero...
e alla foto la trasparenza... aggiungendo un nodo in più nel css (#immagine)
ho messo la foto nel caso in cui al div devi aggiungere delle foto che devono essere trasparenti.

Codice:
<style>
#content{
   background:#999999;
 color: #000000;
}
#immagine{
opacity:0.5;
}
</style>

<img src="tette.jpg" width="" height=""><br>originale<br>
<div id="content"><img id="immagine" src="tette.jpg" width="" height=""> 
<font size="6">.. immagine o sfondo trasparente <br>ma il testo è normale</font></div>

infine...altro modo per avere una scritta su div trasparente è creare un div per il testo e
sovrapporlo sopra il trasparente con lo z-index.

il gatto dà credenza..
quello che fa pensa!

by max_400
 
E ma lo sfondo non è uguale.. io voglio che lo sfondo del testo sia trasparente...
 

Discussioni simili