Jump to content
php.lv forumi

css opacity


Vecteevs

Recommended Posts

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 by Vecteevs
Link to comment
Share on other sites

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"! :)

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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 by andism88
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...