| Autor | Zpráva | ||
|---|---|---|---|
| Yuhů Profil |
Řeším následující problém:
mám menu a chci na jeho pozadí mít obrázek, třeba nějakej břečťan. Chci ten břečťan udělat gifem s průhlednými krajními oblastmi, aby to vypadalo hezky jako vrstva a aby pod tím byly vidět jiné grafické prvky stránek. Břečťan bude převážně tmavý a písmo odkazů nad ním chci světlé. <style>
#menu {background-image: url(tmavy-brectan.gif); color: white;}
#menu a {color: white;}
</style>
<div id="menu" >
<a href="#">položka menu</a>
…
</div>A teď přichází problém. Už z principu se nemůžu spolehnout na to, že se uživateli obrázek břečťanu stáhne. Správně bych tedy měl tomu menu zároveň nastavit zelené pozadí, aby na tom bylo světlé písmo vidět. Jenomže když tomu zelené pozadí nastavím, #menu {background-image: url(tmavy-brectan.gif); background-color: green; color: white;} tak ta zelená barva vyplní i ty oblasti gifu na pozadí, které mají být průhledné. Což je hnus, protože to pak je prostě další ******* obdélník. Takže otázka zní — dá se vůbec na světlých stránkách bezpečně používat tmavé průhledné obrázkové pozadí prvků? Máte na to nějaký trik? |
||
| Vít Dlouhý Profil |
#2 · Zasláno: 25. 12. 2004, 23:40:06
Co použít {background:green url("bily-obrazek.gif")} pro BODY, anebo jiný nadřazený prvek?
Pokud bude vypnuté načítání obrázků, tak se zobrazí zelené pozadí. Nic lepšího asi nevymyslíme. |
||
| DoubleThink Profil * |
#3 · Zasláno: 26. 12. 2004, 00:11:53
To by fungovalo, ale ne v případě, že bude menu nad nějakým prvkem stránky (nad obecnou plochou).
Řekl bych, že to asi nepůjde - GIF bude vždycky propouštět ten podklad. |
||
| izsak Profil |
#4 · Zasláno: 26. 12. 2004, 10:38:40
Pravde podobne treba rátať s tým, že užívateľ má vypnuté sťahovanie obrázkov. (Ináč ak by sa brečtan nenačítal, tak chyba by mala byť v zlom zápise cestu k obrázku a pod. - niečo, čo sa dá odstrániť na "strane serveru")
Čiže keď má vypnuté načítanie obrázkov, tak sa to nedá riešiť cez ďalší obrázok (napr. priehľadný GIF, ktorý by orezával určitú časť). V CSS existuje vlastnosť clip, ktorá určuje viditeľný priezor, avšak v súčastnosti umožňuje využiť len funkciu rect() na definovanie štvorcového priezoru. Ďalšie tvary (kruh, polygón) prídu až v CSS 3 :-( A <map> (alebo aká to je značka; nemám s ňou skúsenosti)? Nedal by sa pomocou nej definovať mnohouholník, nastaviť mu zelené pozadie a umiestniť ho pod navigáciu? Dosť krkolomné riešenie, ale bez použitia obrázkov a "štvorcového" CSS 2.1 asi jediné schodné riešenie. |
||
| Leo Profil |
#5 · Zasláno: 26. 12. 2004, 11:07:19
Navic clip funguje jen na elementech s position absolute.
Map obsahuje elementy area, to muzou byt mnohouhelniky, ale nedaji se nijak vizualne formatovat v CSS. Obavam se, ze Yuhuu bude muset graficky navrh uzpusobit moznostem HTML a CSS :-) Leo |
||
| Vlasta Profil * |
#6 · Zasláno: 28. 12. 2004, 11:40:28
Co tak zkusit pouziti z-index. Obrazek nedavat jako pozadi, ale znackou img a pozicovat jej pod menu. Netestoval jsem - je to jen napad.
Vlasta |
||
| Yuhů Profil |
#7 · Zasláno: 28. 12. 2004, 15:32:28
Obávám se, Vlasto, že to nic neřeší. Pokud má být písmo světlé, stránka světlá a obrázek tmavý, tak img nepomůže.
|
||
| Plaváček Profil |
#8 · Zasláno: 28. 12. 2004, 18:48:57
Já tedy nevím přesně, jaký máš, Dušane, záměr, ale nedrbeš se levou rukou na pravé hýždi? Podobné věci řeším pozadím v nadřazeném prvku s tím, že ten efekt přechodu je tam přítomen a zmíněný problém s průhledností gifu mi odpadá. Ale neznám přesně zadání, musel bych vidět ukázku.
|
||
| Radek Profil * |
#9 · Zasláno: 29. 12. 2004, 15:20:39
Dušane, neznám přesně zadání, ale proč by musel být ten strom průhledný? Co tak ukázku s přesnějším zadáním, zatím s obrázkem a světlým pozadím, ať vidíme, o co jde? Jestli jsem to pochopil, tak to posílám mailem.
|
||
| Leo Profil |
#10 · Zasláno: 29. 12. 2004, 15:48:08
Porad mam pocit, ze Yuhuu chce perpetuum mobile - udelat na strance jiny graficky prvek nez obdelnik bez obrazku. Leo
|
||
| Yuhů Profil |
#11 · Zasláno: 29. 12. 2004, 21:02:45
OK, přiblížím na jiném příkladu.
Je to vrstva, jejíž tvar ani zdaleka není obdélníkový, v tom má Leo pravdu. Mají pod ní být vidět jiné prvky. Břečťan byl jenom příklad. Představte si třeba velikého zatočeného tmavě modrého delfína skákajícího přes celou stránku, který má na ploutvích menu, ale v okolí delfína jsou jiné texty (tam, kam zasahuje delfínův obdélník). Klasickým řešením je delfína rozřezat, ale to je přesně to, co nechci. Dalším možným řešením je nakreslit zbytek stránky do stejného pozadí s delfínem, jenomže ta stránka má mít pružnou šířku. |
||
| Leo Profil |
#12 · Zasláno: 29. 12. 2004, 21:23:44
No idealni by byl asi konkretni priklad, treba jako otisk stranky jak to ma vypadat. Leo
|
||
|
Časová prodleva: 6 let
|
|||
| Yuhů Profil |
#13 · Zasláno: 6. 9. 2010, 14:22:22
Jenom pro pořádek hlásím, že jsem objevil řešení aspoň pro prohlížeče Firefox, Chrome a Operu. Na pozadí se dá použít barva zapsaná v rgbA. Explorer takovou barvu nepozná, takže u něj se může dostavit problém, ale jinak by to mělo být řešení.
|
||
| Chamurappi Profil |
#14 · Zasláno: 6. 9. 2010, 15:26:56
Reaguji na Yuhůa:
V Explorerech by měl na poloprůhledné pozadí zabrat filtr Gradient. Viz nedávná debata: IE8 background alfa kanál |
||
|
Časová prodleva: 14 let
|
|||
0