Il problema è che anche la label sembra risentirne.
Forse sembra a te ma il testo, nel tuo esempio, non risente assolutamente dell'opacity.
Posso notare due cose:
1 - la tua immagine con l'auto è più chiara rispetto a quella coi bicchieri (perlomeno nella parte dove è messo il testo), quindi il testo bianco si confonde con l'immagine stessa. Probabilmente il contenitore dell'immagine coi bicchieri ha un colore scuro, forse nero, per cui, applicando l'opacity, l'immagine tende verso quel colore scuro, mentre la tua immagine tende verso il bianco dello sfondo.
2 - sull'immagine coi bicchieri, il testo ha un'ombra scura. Questo chiaramente lo fa risaltare anche supponendo di avere uno sfondo bianco.
Morale della favola: imposta uno sfondo scuro sotto la tua immagine e aggiungi un'ombra al tuo testo.
EDIT:
Aggiungo un esempio:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
.div {position:relative; float:left;}
.divimage {background:#000;}
.divimage>img{opacity:0.5;}
.divlabel {position:absolute; top:50px; width:100%; text-align:center;}
.label {font-family:'Open Sans', sans-serif; font-size:1.2em; color:White; font-weight:bold;text-shadow:0px 1px 2px #000}
</style>
</head>
<body>
<div class="div">
<div class="divimage">
<img src="image.jpg" />
</div>
<div class="divlabel">
<label class="label">prova titolo oggi è non lo so </label>
</div>
</div>
</body>
</html>
Rispondi quotando
