Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]css opacity
Forum PHP.pl > Forum > Przedszkole
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 smile.gif ok do rzeczy:

  1. <ul id="r_menu_ul">
  2. <a href="#"><li class="r_menu_li"><p>O NAS</p></li></a>
  3. <a href="#"><li class="r_menu_li"><p>MENU</p></li></a>
  4. <a href="#"><li class="r_menu_li"><p>PROMOCJE</p></li></a>
  5. <a href="#"><li class="r_menu_li"><p>GALERIA</p></li></a>
  6. </ul>


css:

  1. ul#r_menu_ul {
  2. display: block;
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. li.r_menu_li {
  8. display: block;
  9. float: left;
  10. margin: 0;
  11. padding: 0;
  12. background: #eee8d5;
  13. opacity: 0.45;
  14. height: 30px;
  15. line-height: 30px;
  16. margin-right: 7px;
  17. }
  18.  
  19. li.r_menu_li > p {
  20. margin: 0;
  21. padding: 0;
  22. padding-left: 5px;
  23. padding-right: 5px;
  24. font-weight: bold;
  25. color: white;
  26. }


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:
  1. <a href="#"><p><li class="r_menu_li">O NAS</li></p></a>

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 smile.gif
Michasko
Tekst dziedziczy opacity.
Zamiast reguły opacity dla elementu użyj reguły background z rgba().
Np.
  1. background-color: rgba(238, 232, 213, 0.45);

Ostatni argument to wartość Twojego opacity, poprzednie 3 to wartości barw w palecie RGB - jednak nie w kodzie szesnastkowym. smile.gif
Aby konwertować wartość z HEX na RGB możesz skorzystać z tej stronki:
http://www.javascripter.net/faq/hextorgb.htm
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.