Znalazłem ciekawy efekty tła obrazkowe tylko nie wiem jak go zrobić.

Question

Witam 

Ostatnio przeglądając internet znalazłem bardzo interesujący efekt tak jak na zdjęciu poniżej.

 

I moje pytanie brzmi... Czy ktoś może wie jak takie efekt uzyksać ? Chodzi mi dokładnie o te kropki które są na zdjęciu.

 

Answer 1

Witaj,

Podobny temat już był. Myślę, że o to właśnie Ci chodziło.

https://forum.pasja-informatyki.pl/8237/pattern-w-tle-css

Nałóż np.poniższe style na tło.

.section-pattern-overlay {
  width: 100%;
  height: 100%;
  background: tutaj wklej poniższy url;
  background-color: rgba(0, 0, 0, .8);}

To tylko przykład oczywiście. Możesz znaleźć wiele innych wzorów.

 background: url(http://fonline-reloaded.net/img/overlay.png);

 

 

Comments

Zrobiłem wszystko według Twoich wskazówek, ale coś chyba poszło nie tak. Bo efekt jest inny od tego co oczekiwałem. Co można zauważyć  poniżej:

---

O widzę, że ktoś korzysta z mojego rozwiązanie, już tłumaczę dlaczego tak jest otóż powiedz mi czy czasem nie korzystałeś z Firefoksa? Nie wiem dlaczego, ale aby pozbyć się tego "błędu" to trzeba pobawić się z dev pixels per px w layout.css w Firefox. Spróbuj ustawić inną wartość dppp.

W Firefox:

w pasku url wpisz: about:config

- w szukaj wpisz: devpix

- zmień wartośc na np. -1.0, 1.0, 1.2 itp ale nie dawaj zbyt dużych!

Również kiedyś się nad tym zastanawiałem jak będę w domu to zobaczę jak to mam ustawione u siebie, jedno jest pewne będę musiał się więcej o tym dowiedzieć. Jeśli już masz jakieś rozwiązanie to proszę napisz. ;)

Edit: Jeszcze zaznaczę, że taki problem może występować tylko w wyższych rozdzielczościach oczywiście korzystając z FF. Nie wiem dlaczego tak się dzieje, teraz gdy sprawdzam na rozdzielczości 1280x1024 no to kropki są ok, wartość dppp jest ustawiona na -1.0

---

Dodam jeszcze komentarz na wszelki wypadek, gdyby ktoś w przyszłości bawił się configiem i "przypadkiem" ustawił dużą wartość. Nie chcę sprawdzać jak to wygląda, ale jeśli już to podaję rozwiązanie:

You can perform the following steps to change the value again "blindly":

1. open firefox and press ctrl +L (this will put the focus into the location bar)
2. type about:config
3. press enter twice
4. type devpix
5. press the tab key
6. press enter
7. type 1.0
8. press enter again & hopefully you should be back to normal visibility now

 

Answer 2

To są malutki kwadraty. Po środku jest mały szary obramowany na biało. Wszystkiemu nadajesz odpowiedni kanał alfa. W css'ie background-repeat: repeat;