Font nella zona trasparente

Question

sto usando libreria jQuery. Faccio un po 'di div trasparente (0,7). Ci sono alcuni testo in quel div. E vedo situazione spiacevole: font del testo è brutto. Mi pare di capire, causare tutto div-area è Transparet, anche il mio testo. Potrei farlo non trasparente?

UPD

Ho cercato di fare il mio div non trasparente: il testo è grande! Così, come posso fare il mio div trasparente, ma il testo che è incluso, non ci dovrebbe essere.

Testato in Win, Linux, MacOS. Chrome, Firefox, Opera, IE

Answer 1

creo una classe generica per gli sfondi traslucidi, una classe generica per i contenitori di testo invisibile, e una classe per l'istanza specifica, con qualsiasi dimensione e posizione styling. Per esempio potrei avere .color_box, .text_box e .side_note. Poi ho creato un po 'di codice come il seguente:

Stili, in questo modo:

.color_box, .text_box {
position: absolute;
z-index: 20;
...
}

.color_box {
background: #xxxxxx;
opacity: .5;
z-index: 10;
...
}

.side_note {
top: 50px;
left: 100px;
width: 240px;
...
}

e HTML in questo modo:

<div class="text_box side_note">lorem ipsum dolor sig amet...</div>
...
<div class="color_box side_note"></div>

La seconda div può andare da nessuna parte all'interno dello stesso contenitore come il primo, e preferisco di mettere al più tardi possibile dato che non è utile per scopi SEO. Questa particolare configurazione è più utile per un sito con molte di queste scatole trasparenti. È necessario una classe per creare una nuova configurazione, e si ri-utilizzano le classi .color_box e .text_box per ciascuno di essi. Se è necessario cambiare il colore di sfondo, è in un unico luogo. Il posizionamento per qualsiasi area in una singola classe.

Answer 2

Domanda interessante. Ecco la soluzione che mi viene in mente prima:

<style>
  .wrapper {position:relative;}
  .transparent { position:absolute; background:red; top:0; bottom:0; left:0; right:0;}
</style>

<script>
  $(document).ready(function(){
    $('.transparent').css('opacity',.7)
  });
</script>

<div class="wrapper">
   <div class="transparent"> </div>
   <div class="opaque">your text</div>
</div>

In sostanza il gioco è posizionare il testo di sedersi sulla parte superiore della scatola trasparente.

Answer 3

tendo utilizzare un semi-trasparenti .png e quindi utilizzare un hack per IE6, che è descritto in questo discussione insieme alle altre opzioni.

Answer 4

Si potrebbe usare RGBA () per specificare il colore della casella, RGBA () non viene ereditata da eventuali elementi figli. purtroppo RGBA è supportata solo dai browser moderni più (FF, Safari, Chrome), ma è fantastico da usare.

#yourbox {
    background-color:rgba(red,green,blue,alpha);
{

Tutto ciò che fai è ottenere il valore del colore che si desidera in RGB, quindi impostare il valore alfa scorso, è inoltre necessario impostare un valore di ripiego per i browser che non lo supportano.

#yourbox {
background-color:#fff;    
background-color:rgba(255,255,255,0.5);
{

Questo vi darà una casella bianca al 50% di opacità nella maggior parte dei browser moderni, ma vi darà una solida scatola bianca nella maggior parte delle versioni di IE.