[CSS] trasparenza cella/testo

[pataciolla]

Ciao a tutti ...

ho un piccolo problema con i css ... ho una tabella a cui applico il seguente css per la trasparenza (in modo che funzioni sia con firefox che con explorer):

filter: alpha(opacity=50);
opacity: 0.5;

fino a qui tutto bene .. la tabella e di conseguenza le celle diventano trasparenti... il problema è il seguente... a me interessa che la tabella, lo sfondo per l'esattezza, sia trasparente però il css mi rende trasparente anche il testo digitato all'interno, cosa che io non voglio.... :muro:

Sapete dirmi come posso impostare la traparenza in modo che lo sfondo della tabella sia trasparente mentre il testo all'interno no???
..ho provato a reimpostare la trasparenza con un altro css all'interno dei tag paragrafo (a parte che non dovrei mettere il tag <p> ci ho provato cmq) .. al div.. e anche alla singola cella dove non è impostato uno sfondo (che è impostato sulla tabella generale) ma non mi funziona in nessuno dei modi!! :cry:

se saapete aiutarmi vi ringrazio :help:
pata

[pataciolla]

bu ... 16 visite... devo dedurre che non c'è soluzione??
:cry:

[71104]

bu ... 16 visite... devo dedurre che non c'è soluzione??
:cry:
devi dedurre che è un solare sabato pomeriggio e che siamo gli unici due incollati al PC :D

[DanieleC88]

Ci sono anche io, e ti consiglio, a questo punto di usare un'immagine di sfondo semitrasparente. Ma anche lì sono rogne con Internet Explorer, non pensare che usare una PNG sia una cosa facile. Dovrebbe esserlo, e invece... :cry:

[pataciolla]

grazie ... se non trovo altra soluzione farò così...


devi dedurre che è un solare sabato pomeriggio e che siamo gli unici due incollati al PC :D

l'avevo dedotto.. ma visto il numero di visite che segnava dubito che tu ti diverta a visitare ripetutamente la mia discussione... cmq mi fa piacere sapere che non sono l'unica sfigata bloccata davanti il pc..:D

pata

[kwb]

Riesumo questo topic vecchio più di un anno perchè ho lo stesso identico problema.
Mi sembra impossibile che non sia stato inventato un modo per rendere trasparente solo lo sfondo e non tutto ciò che c'è dentro il div.
Per farvi un esempio: ho un div ( wrapper ) che contiene tutto il sito ( al suo interno vi sono altri div ), applicandogli l'apposito codice per rendere trasparente lo sfondo, oltre ad applicarlo al testo presente nel div wrapper lo applica a tutti gli altri div interni a wrapper....
Dopo un anno, l'unica soluzione è ancora quella delle PNG?

Kwb

[DanieleC88]

Non credo che il tuo problema sia esattamente lo stesso che aveva pataciolla, dovresti applicare la regola soltanto al primo div figlio di body.
Penso che una cosa del genere possa andare:
body > div {
/* ... */
}
In realtà temo che questa regola continui ad applicare le proprietà a tutti i figli di body, nel caso ti consiglio (visto che è un wrapper fisso) di dargli un ID unico e usare quello per selezionarlo univocamente nel CSS.
Ad esempio:
div#container {
/* ... */
}

Prova così. ;)

[kwb]

Guarda, non penso funzioni, ho provato ma alcune cose non le ho capite, ad esempio, perchè dopo le graffe dovrei mettere un commento? :mbe:
Questo è il CSS
@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
text-align: center; /* IE Fix */
background: url(img/bg.jpg) repeat-x #222222 ;
font-family:Arial, Helvetica, sans-serif, serif;
}

#wrapper {
width: 1004px;
height: 717px;
margin: 10px auto 0;
text-align:left;
color: #e3e3e3;
}
#header {
background: url(img/header.png) no-repeat;
margin: 0 auto;
width: 1004px;
height: 97px;
}
/* Menu */
#tc {
background:url(img/tc.png) no-repeat top;
margin: 15px auto 0;
width: 924px;
height: 5px;
}

#menu {
background:url(img/menu.jpg) repeat-x;
margin: 0 auto;
width: 924px;
height: 23px;
}
#menu ul li {
font-weight: bold;
font-size: 12px;
text-align: center;
float: left;
display: block;
width: auto;
height: 23px;
padding: 3px 5px 0;
text-decoration: none;
color: #d9d9d9;
list-style: none;
list-style-type:none;
background: url(img/divisore.jpg) no-repeat right;
}
#menu ul li a{
color: #d9d9d9;
text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active {
color: #C4C4C4;
text-decoration: none;
}

#menu ul li a:visited {
text-decoration: none;
color: #E7EFEF;
}

#bc {
background:url(img/bc.png) no-repeat bottom;
margin: 0 auto;
width: 924px;
height: 5px;
}


Terminate le regole dell'id wrapper, tutto ciò che segue è tra i tag html
<body>
<div id="wrapper">
<div id="header"></div>
<div id="tc"></div>
<div id="menu">
<ul>
<li><a href="index2.html">Testo di prova1</a></li>
</ul>
</div>
<div id="bc"></div>
</div>
</body>


Se nel CSS provo ad applicare qualcosa del genere:
body>#wrapper {regola}

oppure
body>div#wrapper {regola}

oppure
div#wrapper {regola}
La trasparenza si applica a tutti.

Anche definendo una classe, assegnandola solo ed esclusivamente al wrapper, i div interni si trasparentizzano :p

.trasparenza {regole}

<div id="wrapper" class="trasparenza"><altri div></altri div></div>

Ho esauirto le idee :help:

[DanieleC88]

Guarda, non penso funzioni, ho provato ma alcune cose non le ho capite, ad esempio, perchè dopo le graffe dovrei mettere un commento? :mbe:
Eh? Il commento coi puntini sospensivi era tanto per dire che lì ci metti quello che più ti interessa! :p
Ho esauirto le idee :help:
Prova a dire ai div figli di div#wrapper di avere uno sfondo opaco.

[kwb]

Prova a dire ai div figli di div#wrapper di avere uno sfondo opaco.Il fatto è che alcuni div figli hanno come sfondo un'immagine, come faccio a dirgli di renderla opaca :asd: ?

[DanieleC88]

Con opacity: 100%?

[kwb]

Con opacity: 100%?

Facendo un esempio sull'header, dici così:

#header {
filter:alpha(opacity=100);
opacity:1.0;
background: url(img/header.png) no-repeat;
margin: 0 auto;
width: 1004px;
height: 97px;
}

EDIT: Appena provato così come ho scritto qua sopra, non va.
Se si, mi pareva di aver già provato, senza successo

[DanieleC88]

Sì, intendevo una cosa del genere. Be', mi dispiace, ma per il momento ho esaurito le idee! Certo che a quest'ora della notte (e con l'aiuto dell'alcool) non ho un cervello particolarmente attivo, magari domani mi rivedo meglio il CSS che hai postato e provo un po' a vedere che ne esce.

ciao ;)

[kwb]

Grazie comunque dell'aiuto.
Mi sembra veramente ridicola come cosa che la W3C non abbia pensato a qualcosa di meglio... È quasi un bug una regola del genere... Cercavo di far andare sta storia della trasparenza perchè se ho ben capito, in un modo o nell'altro, ci sono i comandi per farla andare su tutti i browser che contano... Le PNG invece, se ben ricordo, non sono troppo supportare da IE < 7 . Per ora vado di PNG, però che scocciatura..... :muro:

Se ti viene in mente altro, fammi sapere! :)


Kwb

[DanieleC88]

Stavo provando un po' la pagina, ma in mancanza delle immagini di sfondo che usi non riesco a riprodurre bene l'effetto originale: non è che potresti fornirci la pagina con le immagini?

[kwb]

Stavo provando un po' la pagina, ma in mancanza delle immagini di sfondo che usi non riesco a riprodurre bene l'effetto originale: non è che potresti fornirci la pagina con le immagini?

A te l'intero lavoro, dentro ho aggiunto anche il file PSD di Photoshop nel caso servisse...
[File cancellato]

[DanieleC88]

Scusa, io lo vedo così:
http://i27.tinypic.com/mc9eo7.png
Questo da Firefox 3, ma anche su Internet Explorer 8 lo vedo identico. :)
A me sembra identico al PSD, sbaglio?

[kwb]

Si ma guarda che le trasparenze le ho fatte con le PNG, non col comando CSS :D

[DanieleC88]

Whoops, scusa, hai ragione... :D

Allora, il punto è che si può fare. Ad esempio, con Firefox 3:
http://i27.tinypic.com/16iffux.png

E questo non usa PNG, ho rimosso i vari background dai div della pagina, e li ho sostituiti nel div principale con:
background-color: #444;
filter: alpha(opacity=50);
opacity: 0.5;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

La fregatura però è che così anche gli elementi del div (il testo "Ciao belli", ad esempio) ottengono la semitrasparenza, se ci fai caso, e che con Internet Explorer la cosa è un po' complessa. Per esempio, da me Internet Explorer 8 mi blocca il "contenuto attivo" e non mi fa vedere la trasparenza se non la attivo io esplicitamente.

Riepilogando, si può fare, ma secondo me ti risparmi un sacco di lavoro se usi delle PNG per i bordi e usi dei div per impostare gli sfondi. Ovviamente, anche qui, attento ad Internet Explorer e al suo scarso supporto alle PNG... :D

[kwb]

Si appunto, il guaio è quello, che ti rende tutto trasparente....
Non vedo l'ora facciano uscire questo CSS 3 ( e HTML 5 ) così da poter fare molte più cose con meno sbattimento ( vedi bordi arrotondati.... ).

[DanieleC88]

Un link utile:
http://www.playingwithfire.com/test/pngbehavior/demo.html

Forse sono solo io ignorante in quanto a CSS, comunque resto del parere che delle PNG per i bordi e gli sfondi siano la cosa più comoda anche in quanto a supporto tra i vari browser.

[kwb]

Un link utile:
http://www.playingwithfire.com/test/pngbehavior/demo.html

Forse sono solo io ignorante in quanto a CSS, comunque resto del parere che delle PNG per i bordi e gli sfondi siano la cosa più comoda anche in quanto a supporto tra i vari browser.

Grazie