css opacity

[Vecteevs]

Sveiki, man ir problēma ar opacity. Tātad man ir bilde un uz tās es gribu uzlikt vēl tekstu. uz melna fona un ar baltiem burtiem.

css priekš tā opacity man izskatās šādi

 width:138px;
   height:22px;
   background-color:#000;
   opacity:0.8;
   color:#fff;
   font-family:"Trebuchet MS";
   font-size:10pt;

bet tie baltie burti zaudē savu krāsu dēļ tā opacity, kā būtu jādara lai viņi būtu pilnībā bailti?

Edited August 28, 2011 by Vecteevs

[daGrevis]

Uztaisi divus elementus...

 

1) "Div'u" kvadrtātam, kurš būs melnīgsnējs,

2) "Span'u" tekstam, kurš būs balts;

 

Labojums:

 

"Span'a" elements automātiski mantos "div'a" 'opacity'. Reseto atpakaļ uz "default'o"! :)

[Vecteevs]

hmm ja es pareizi sapratu ir jādara šādi?

caurspidigais kvadrats

background-color:#000;
   opacity:0.8;

teksts

color:white;
   font-family:"Trebuchet MS";
   font-size:10pt;

 

html es parādu šādi <div class=""><span class="">teksts</span></div>

[daGrevis]

Nu jā... :) Kaut kas neiet?

[Vecteevs]

paliek tā pat, patestēju ar opacity uzliekot uz 0.3

[vertex]

paliek tā pat, patestēju ar opacity uzliekot uz 0.3

 

Uz kāda pārlūka Tu testē?

[Vecteevs]

firefox uz IE ir savādāk jāraksta

[andism88]

ir ir šāda problēma ko var atrisināt tik ar sauktajiem "hack" divus elementus neatkarīgus viena no otra savādāk tiek mantots caurspidigums..

Tatad <div id="caurspidigais">puscaurspidigas bildes,teksti utt</div><div id="necaurspidigs">teksts</div> Un ar position palidzibu novietot otro div uz pirmo.. Cik atceros tā bija vienīgā iespēja...

Papildinājums..

Piemērs no reāla koda

<div id="augsja">
 <div id="augsja_val">
 	<img src="img/val_lv.gif" class="augsja_val_o">
 	<img src="img/val_ru.gif" class="augsja_val_o">
 	<img src="img/val_gb.gif" class="augsja_val_o">
</div>
<div id="augsja_navigacija">
 	<a href="#" class="augsja_linki">
  	<span class="linki_a_jaunumi">Jaunumi</span>
 	</a>
 	<a href="#" class="augsja_linki">
  	<span class="linki_a_raksti">Raksti</span>
 	</a>
 	<a href="#" class="augsja_linki">
  	<span class="linki_a_par_mums">Par mums</span>
 	</a>
</div></div>

un css attiecīgi:

#augsja_navigacija {
padding: 2px 7px 2px 7px;
width: 100%;
height: 46px;
background-color: black;
filter: alpha(opacity=70);
opacity: 0.7;
margin-top: 250px;
}

#augsja_val {
margin-right: 10px;
margin-top: 16px;
float: right;
position: relative;
top: 250px;
z-index: 2;
}

Kur tiek panākts ka viss kas atrodas <div id="augsja_val"> ir 100% redzams pārējais puscaurspiudigs

Edited August 28, 2011 by andism88

[Vecteevs]

man tāda doma arī ienāca prātā, bet cerēju ka varēs savādāk. Ja tomēr var savādāk tad iemetiet komentāru! :)

[andism88]

Es atceros ka ar šo jautājumu reiz izvandīju googli un šis bija vnk variants... Viss kas ir iekš caurspidīgs.. Pat google nezin atbildi...

[dot]

Var jau backgroundā likt 1px caurspīdīgu gif bildi.

vai css background { rgba(000,000,000,0.3) }

[daGrevis]

"Span'a" elements automātiski mantos "div'a" 'opacity'. Reseto atpakaļ uz "default'o"! :)

 

Nesanāk? 0_o

 

Labojums:

 

Jocīgi...

[Evi]

Uzliez background kraasu kā:

 

background-color:rgba(0,146,207,0.8)

 

Bet nu IE7 uz zemāk šo transp neatbalsta.

 

Var arii likt vnk transparentu .png kaa bg image.

[Vecteevs]

 

Nesanāk? 0_o

 

Labojums:

 

Jocīgi...

ja uzliek nu jā, man ir tāpat, bet tavā gadījumātie burti arī ir dzeltenīgi nevis balti, un ja uzliek opacity o.2 tad takā būu burtiem jābūt vienalga pilnā baltumā, bet viņi iet kopā ar fona krāsu

[mad182]

Tā jābūt, caurspīdīgums tiek mantots no parent elementa. Norādot child'am opacity, tā jau būs tikai procentos no parenta opacity, tāpēc to var tikai uztaisīt vairāk caurspīdīgu.

 

 

Izmanto png bildi vai andism variantu.