Text normale su immagine background opaca

**DarkOmbre** · 12-09-2012, 04:51

Ciao a tutti di nuovo , costruendo il sito web ho trovato un altro ostacolo:
nell'header ho inserito un immagine ("vaso1") e sopra di essa metterò il titolo che nel codice ho chiamato "NUOVO SITO"...ebbene quando vado a mettere l'effetto opaco sull'immagine di background dell'header ("il vaso1") , pure il text ("NUOVO SITO") diventa opaco!ho usato questo css:

opacity:0.4;
filter:alpha(opacity=40);

è da ore che provo in modi diversi ma l'unica soluzione l'ho trovata su un sito che dice di usare questo codice:

.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter

rogid

XImageTransform.Microsoft.gradient(startColorstr=# 99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid

XImageTransform.Microsoft.gradient(startColorstr=# 99000000, endColorstr=#99000000)";
}

Peccato che io non sappia dove metterlo/come applicarlo

ho provato anche a specificare l'opacità del testo (#text) , ma non ha funzionato.
Mille grazie a chi risolve , sto impazzendo

Il codice della pagina è:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {font: normal 16px/1.5em helvetica, arial, sans-serif; background: rgb(232,222,191)}

.container { width:960px; margin:20px auto;
}
.header { text-align:center; background: white; height:100px;
padding:5px; background-image:url('vaso.jpg'); opacity:0.4;
filter:alpha(opacity=40);}

.content { float:left; width:960px; text-align:center; height:400px;
background:white; padding:100px 0px
}
.footer { clear:both; text-align:center; background: rgb(232,222,191); color:black;
height:25px;}

#text {font-size: 20pt; margin: 30px 0px 0px 20px; background-color:rgb(232,222,191); float: left;}

} </style>
</head>
<body>
<div class="container" style="margin-top:-10px">
<div style="margin: 0px 20px 0px 0px" align="right">Italian
English</div>
<div class="header">
<div id="text" align="left">NUOVO SITO</div>
</div>
<div class="content" align="left">
<h2 style="font-size: 10pt">BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</h2>
<div align="left">[img]vaso1.jpg[/img]</div>
</div>
<div class="footer">
<div style="margin: 0px 20px 0px 0px">
<h3 style="font-size: 10pt" align="right">BLA BLA BLA</h3>
</div>
</div>
</div>

</body>
</html>

Inoltre potreste dirmi se lo sto costruendo bene (anche se è ancora scarno xD)? è il mio primo sito che faccio con il block notes e se avete qualche suggerimento da darmi , lo apprezzerò molto. ciao!!

**FPDesign** · 12-09-2012, 07:36

Alcuni consigli in generale:

Come editor può andare bene Notepad ma ti consiglio di scaricare Notepad++ che è gratuito ma offre alcune funzionalità avanzate come la colorazione del codice che lo rende più leggibile
Visto che stai utilizzando il CSS, a meno di particolari esigenze non inserire lo stile anche nei singoli elementi. Metti tutto nello stile principale e utilizza i selettori (classi, ID, tag) per impostare lo stile dei tuoi elementi da lì.
Sempre legato al punto precedente: i vari align="left" che hai inserito nei div possono essere rimpiazzati da opportune proprietà CSS (come già fai ad esempio per il div con id="text" in cui imposti il float:left). In generale non è buona cosa mescolare lo stile impostato col CSS con le proprietà dei tag HTML.

Venendo al tuo problema puoi guardare sul sito del W3C nella pagina dedicata alla proprietà opacity (cerca css opacity con Google, è il primo risultato) oppure anche qui su html.it a questa pagina: http://www.html.it/pag/19448/opacity/
In ogni caso il problema deriva dal fatto che la proprietà opacity viene ereditata da tutti i tag che discendono dal tuo div header. Se non vuoi che anche il testo sia trasparente devi racchiuderlo in uno span o un div (come hai già fatto) e resettare la proprietà a 1.

Ciauz!

**DarkOmbre** · 12-09-2012, 16:42

Ciao ho apprezzato molto i tuoi consigli e ti do ragione al 100% , non appena avrò risolto questo problema convertirò tutte le proprietà in css!

Purtroppo però quello che dici tu non ha funzionato

eppure mi sembra scritto bene

:

.header { text-align:center; background: white; height:130px;
padding:5px; background-image:url('vaso.jpg'); opacity:0.6;}

#text {font-size: 20pt; margin: 30px 0px 0px 20px; background-color:rgb(232,222,191); float: left; opacity:1; align: left;}

<div id="text">NUOVO SITO</div>

Eppure con questi comandi l'header background è opaco , e il testo "NUOVO SITO" , pur seguendo i valori di text quali font-size margin ecc...rimane opaco , pur con l'opacity settata a 1 (che dovrebbe essere non-opaco)

Ho provato anche con <span> ma il discorso non cambia , stesso comportamento. Come ho scritto nel primo post , avevo trovato questo codice:

.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter

rogidXImageTransform.Microsoft.gradient(startColor str=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progidXImageTransform.Microsoft.gradient(startCol orstr=#99000000, endColorstr=#99000000)";
}

...ma non so proprio dove inserirlo! cos'è alpha60? un div? Grazie in anticipo

con un pò di intuito sono riuscito a usarlo correttamente!

.alpha60 {color: rgba(0, 0, 0, 1.0);}

<div class="alpha60">NUOVO SITO</div>

la scritta "NUOVO SITO" però a 1.0 rimane uguale come se .alpha60 non ci fosse...se però setto il valore più in basso (ad esempio 0.6) la scritta si opacizza di più...quindi il comando lo prende ma sembra che non si possa opacizzare meno dell'header, quindi con alpha60 posso solo opacizzare di più , ma non di meno! Non ne esco più

avete qualche idea? grazie in anticipo!!

**ac_socmel** · 12-09-2012, 16:56

non usare opacity (se non sai tante altre cose)

codice:

.header {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

**DarkOmbre** · 12-09-2012, 17:09

Originariamente inviato da ac_socmel
non usare opacity (se non sai tante altre cose)

codice:

.header {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

SIIIIIIII!!!! grazie mille!!!

Discussione: Text normale su immagine background opaca

Strumenti discussione

Ricerca discussione

Visualizza

Text normale su immagine background opaca

Permessi di invio