| Autor | Zpráva | ||
|---|---|---|---|
| xxxadam577 Profil |
#1 · Zasláno: 20. 3. 2016, 10:11:45
Ahoj, jak udělat přes obrázek takovouto mřížku??
webthemez.com/demo/alive-Responsive-Coming-Soon-Template díky moc ;) |
||
| juriad Profil |
Na začátku stránky je použita ta mřížka:
.banner-container {
background: rgba(0, 0, 0, 0.05) url("../images/dots.png") repeat scroll 0 0; /* je to obrázek šachovnice 2x2, bílá pole jsou průhledná */
height: 760px;
}A na konci je pod ní vsunut obrázek, který je JS postupně vyměňován za jiný. To je také důvod, proč jsou tam ty „divné“ vypočítané hodnoty. <div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 490px; width: 1514px; z-index: -999999; position: fixed;"><img style="position: absolute; margin: 0px; padding: 0px; border: medium none; width: 1514px; height: 769.782px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -139.891px;" src="images/img2.jpg"></div> |
||
| xxxadam577 Profil |
#3 · Zasláno: 20. 3. 2016, 10:21:06
Aha,
díky moc :D |
||
| Bubák Profil |
#4 · Zasláno: 20. 3. 2016, 11:08:57
Základem je vhodný obrázek pro mřížkua, v odkázaném případě to je 2×2px PNG obrázek webthemez.com/demo/alive-Responsive-Coming-Soon-Template/images/dots.png
Zbytek jsou hrátky s rozměry, pozicováním a z-indexem, protože je potřeba element s mřížkou dostat nad obrázek. Obecně by šlo použít třebas tohle: Živá ukázka Odkaz |
||
|
Časová prodleva: 8 let
|
|||
0