Autor Zpráva
xxxadam577
Profil
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
Aha,
díky moc :D
Bubák
Profil
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: