opacity al div e non al testo

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!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
potresti dare un colore al testo che non sia nero

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

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 

Vicar

Utente Attivo
15 Gen 2010
48
0
0
E ma lo sfondo non è uguale.. io voglio che lo sfondo del testo sia trasparente...
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson Filter opacity all'immagine HTML e CSS 1
F Problema opacity e z-index con immagine HTML e CSS 3
B Opacity HTML e CSS 1
M Oltre -moz-opacity: x.y; ce ne sono altre? HTML e CSS 0
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1

Discussioni simili