[HTML][CSS]css opacity, problem z zakładaniem sie elemntow Opcje

[swiru_]

Witam,

Szybkie pytanko. Bawie sie troche opacity w css i cala ta zabawa zaprowadzila mnie do miejsca z ktorego nie potrafie wyjsc, ciezko jest mi to ztagowac w google wiec pisze tutaj. Podejzewam ze problem nie lezy po stronie OPACITY w css tylko po stronie mojej niepelnej wiedzy w temacie dziedziczenia lub jakiejs innej zasady o ktorej nie wiem w css ok do rzeczy:

[HTML] pobierz, plaintext 
<ul id="r_menu_ul">
	<a href="#"><li class="r_menu_li"><p>O NAS</p></li></a>
	<a href="#"><li class="r_menu_li"><p>MENU</p></li></a>
	<a href="#"><li class="r_menu_li"><p>PROMOCJE</p></li></a>
	<a href="#"><li class="r_menu_li"><p>GALERIA</p></li></a>
</ul>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
ul#r_menu_ul {
display: block;
margin: 0;
padding: 0;
}
 
li.r_menu_li {
display: block;
float: left;
margin: 0;
padding: 0;
background: #eee8d5;
opacity: 0.45;
height: 30px;
line-height: 30px;
margin-right: 7px;
}
 
li.r_menu_li > p {
margin: 0;
padding: 0;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
color: white;
}
[HTML] pobierz, plaintext 

li jest prostokatem o kolorze jakims tam z nadana przezroczystoscia na 0.45, tekst ktory znajduje sie w li jest koloru bialego I TU ZACZYNA SIE PROBLEM, wyglada na to ze tekst znajduje sie pod li poniewaz bialy kolor nie jest 100% bialym. probowalem nadawac dla p opacity na 1, probowalem wpisac li w p czyli:

[HTML] pobierz, plaintext 
<a href="#"><p><li class="r_menu_li">O NAS</li></p></a>
[HTML] pobierz, plaintext 

probowalem nawet z-indexem to zalawic ale tez nic nie daje (osobiscie wolal bym uniknac roziwazania typu z-index)...

Czy ktos ma moze jakis pomysl co z tym fantem zrobic?

Z gory dzieki i pozdrawiam

[Michasko]

Tekst dziedziczy opacity.
Zamiast reguły opacity dla elementu użyj reguły background z rgba().
Np.

[CSS] pobierz, plaintext 
background-color: rgba(238, 232, 213, 0.45);
[CSS] pobierz, plaintext 

Ostatni argument to wartość Twojego opacity, poprzednie 3 to wartości barw w palecie RGB - jednak nie w kodzie szesnastkowym.
Aby konwertować wartość z HEX na RGB możesz skorzystać z tej stronki:
http://www.javascripter.net/faq/hextorgb.htm

Ten post edytował Michasko 24.01.2013, 00:55:02

[tolomei]

Witaj.

Jeśli zależy Ci na skutecznym rozwiązaniu które będzie kompatybilne z przeglądarkami, jako kolejną opcję możesz także wygenerować półprzeźroczysty obrazek .png 1px na 1px i użyć go w stylu background-image.

Pozdrawiam