| Autor | Zpráva | ||
|---|---|---|---|
| BuGeR Profil |
#1 · Zasláno: 22. 11. 2009, 22:45:02
Dobrý večer.
Mám obrázek : 
Hledám nějaký kód který by zobrazil tento obrázek na procenta (5,15,20,25.....) Prostě aby se zobrazila jen určitá část obrázku.. Nechci to dělat přes WIDTH - protože se ten obrázek nerozdělí, ale zmenší na tu velikost.. Boužel jsem líný to rozdělit ve photoshopu.. Nevím jak to jinak vysvětlit.. Děkuji za případné odpovědi :) |
||
| imploder Profil |
#2 · Zasláno: 22. 11. 2009, 22:55:42 · Upravil/a: imploder
BuGeR:
http://www.jakpsatweb.cz/css/background-position.html Napozicuj si ten obrázek do 250px širokého <div>u jako pozadí bez opakování (background-repeat: no-repeat), dej mu background-position: -100% 0% (resp. 100% 0% pokud se má vysouvat zprava). Pak ho můžeš zleva (resp. zprava) vysouvat tak, že mu budeš přidávat (resp. ubírat) x-ovou souřadnici v background position. http://www.jakpsatweb.cz/css/background-position.html <div>, který to bude mít na pozadí, by měl mít nastaveno overflow: hidden, aby část obrázku zalezlá za jeho okraj nebyla vidět. |
||
| imploder Profil |
#3 · Zasláno: 22. 11. 2009, 22:59:25
Tak nějak jsem nabyl dojmu (možná mylného), že to bude nějaký progressbar. Pokud se má ukazovat vždycky jenom část obrázku na pevně daném prostoru, jde to udělat změnou pozice pozadí (background-position) taky.
|
||
| BuGeR Profil |
#4 · Zasláno: 22. 11. 2009, 23:08:45
imploder:
Děkuji za odpověď. Zkusil jsem to ale buď to nefunguje, nebo jsem to špatně pochopil.. <div width='250px' style='background-repeat: no-repeat;background-position: -80% 20%;overflow: hidden'> <img src='http://live-fun.cz/upload/394980039510373455.png' /> </div> Výsledek je zde : live-fun.cz/test.html Prostě se nic nestalo.. |
||
| imploder Profil |
#5 · Zasláno: 22. 11. 2009, 23:20:04 · Upravil/a: imploder
BuGeR:
ten obrázek musí být na pozadí, ne jako obsah <div>u. background-image: url('394980039510373455.png')Overflow vypínat nebude nutné, to je pro obsah (spletl jsem to). <div> samotný může být klidně prázdný. |
||
| BuGeR Profil |
#6 · Zasláno: 22. 11. 2009, 23:23:49
Děkuji, ale i tak to nefunguje:(
<div width="250px" style="background-image: url('upload/394980039510373455.png');background-repeat: no-repeat;background-position: -80% 20%;">
</div>live-fun.cz/test.html |
||
| Bubák Profil |
#7 · Zasláno: 23. 11. 2009, 08:11:12
Různá řešení, nejvíce se mi zamlouvá poslední (modrá má jen ilustrační charakter).:
<div style="width: 250px;
height: 20px;
background: blue url('upload/394980039510373455.png') no-repeat -75px 0">
</div>
<div style="width: 500px;
height: 20px;
background: blue url('upload/394980039510373455.png') no-repeat -30% 0">
</div>
<div style="width: 250px;
height: 20px;
background: blue">
<div style="width: 70%;
height: 20px;
background: red url('upload/394980039510373455.png')">
|
||
| BuGeR Profil |
#8 · Zasláno: 23. 11. 2009, 14:12:02
Děkuji :) moc jsi mi pomohl..
|
||
|
Časová prodleva: 14 let
|
|||
0