Jak zrobić siatkę (jak siatka z papieru graficznego) za pomocą tylko css?

Question

Jak zrobić siatkę (jak siatka z papieru graficznego) za pomocą tylko css? Po prostu chcę zrobić wirtualny papier siatkowy z użyciem tylko CSS. Z góry dziękujemy za pomoc.

Answer 1

ponieważ wspomniane wysadzanej papier:

background-color: #fff; 
background-size: 100% 1.2em; 
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
        -webkit-linear-gradient(#eee .05em, transparent .05em); 
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
        -moz-linear-gradient(#eee .05em, transparent .05em); 
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
        -ms-linear-gradient(#eee .05em, transparent .05em); 
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
        -o-linear-gradient(#eee .05em, transparent .05em); 
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
        linear-gradient(#eee .05em, transparent .05em); 
-pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0/100% 1.2em, 
       linear-gradient(#eee .05em, transparent .05em) 0 0/100% 1.2em #fff; 
behavior: url(/PIE.htc); 

Ostatni wiersz: behavior: url(/PIE.htc); jest plugin o nazwie css3pie który dodaje wsparcie dla IE 6-9 wierzę. W rzeczywistości ten przykład jest wzięty z ich strony internetowej, gdzie istnieje wiele bardziej interesujących przykładów: http://css3pie.com/demos/gradient-patterns/

Answer 2

Co można zrobić, to chwycić obraz siatki jak ten jeden

następnie płytek go z CSS

#background { 
    background: url('path/to/grid-image.png'); 
} 

Więc tak, nie tylko CSS - również potrzebne obraz, ale rozwiązanie powinno być całkiem czyste. Zobacz go w akcji tutaj: http://jsfiddle.net/bhVhV/

Answer 3

<style> 
body { 
    background: 
     linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px), 
     linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
     linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px), 
     linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), 
     linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), 
     linear-gradient(-90deg, #aaa 1px, transparent 1px), 
     linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), 
     linear-gradient(#aaa 1px, transparent 1px), 
     #f2f2f2; 
    background-size: 
     4px 4px, 
     4px 4px, 
     80px 80px, 
     80px 80px, 
     80px 80px, 
     80px 80px, 
     80px 80px, 
     80px 80px; 
} 
</style> 

Answer 4

następujące powinny wystarczyć na nowoczesnych przeglądarkach ..

body { 
    background-size: 40px 40px; 
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px); 
} 

http://codepen.io/anon/pen/VvPWvv

będzie produkować kropkowana siatka ..

body { 
    background-size: 40px 40px; 
    background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); 
} 

https://codepen.io/anon/pen/xdqjRZ

http://caniuse.com/#search=linear-gradient