esiste un modo per ottenere questo effetto in un modo compatibile con browser diversi senza dover preparare immagini separate?Raggiungere l'effetto opacità bianco in html/css
Fondamentalmente il fotogramma su cui il testo ha una sovrapposizione bianca del 50% di opacità. Vorrei una soluzione che non implicasse la creazione di altre immagini oltre allo sfondo, ma non so se sia possibile!
Prova RGBA, per esempio
div { background-color: rgba(255, 255, 255, 0.5); }
Come sempre, questo non funzionerà in ogni singolo browser mai scritto.
funziona ma non è compatibile con IE, quindi ho dovuto usare un'immagine di sfondo di 1 pixel con 50% di alpha. Grazie comunque :) – Jack
Se non è possibile utilizzare rgba a causa del supporto del browser e non si desidera includere un PNG bianco semitrasparente, sarà necessario creare due elementi posizionati. Uno per la casella bianca, con l'opacità e uno per il testo sovrapposto, solido.
body { background: red; }
.box { position: relative; z-index: 1; }
.box .back {
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }
body.browser-ie8 .box .back { filter: alpha(opacity=75); }<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>
possibile duplicato di [CSS: Styling visitato immagini attraversano modo del browser/cross browser opacità] (http://stackoverflow.com/questions/1438671/css-styling-visited-images-cross-browser -way-cross-browser-opacity) –
Vedi il dupe. Dovrai inserire il testo nero in un DIV separato anche se –
ma nota che i filtri per IE6 sono in realtà dei "risucchetti delle risorse" (che una workstation IE6 probabilmente non ha molto da risparmiare). – Hannes