Versuchen, einen konfigurierbaren Punkt Hintergrund mit nur CSS

Question

zu machen Ich versuche, einen Rasterhintergrund aus Punkten zu machen. Ich kann nicht nur ein Bild verwenden, weil ich alles, was konfigurierbar zu sein:

• Hintergrundfarbe
• Punktfarbe
• Punktgröße
• Raum zwischen den Punkten

Es sei denn, es gibt eine bessere Lösung, ich denke, der einzige Weg, dies zu erreichen, ist mit reinem CSS. Ich habe mich ein wenig umgesehen und bis jetzt ist das nächste, was ich gefunden habe, ein Radial-Gradient zu verwenden. Ich habe jedoch Schwierigkeiten. Ich war nicht in der Lage, eine Lösung zu finden, die es mir ermöglicht, sowohl die Punktgröße als auch den Abstand zwischen den Punkten zu konfigurieren, während eine Kreisform beibehalten wird. Ich bin nahe gekommen, aber dann sehen meine Punkte aus wie Diamanten statt Kreise. Hier ist, was ich mit so weit habe kommen:

https://jsfiddle.net/yzpuydtn/

body { 
    background-image: radial-gradient(black 2px, white 2px); 
    background-size:40px 40px; 
} 

Hat jemand irgendwelche Vorschläge? Anfangs möchte ich, dass meine Punkte 2px x 2px und 40 px auseinander liegen. Gibt es dafür einen besseren Weg oder konfiguriere ich meinen Farbverlauf einfach falsch? Ich denke, ich bin nah dran, aber abhängig davon, wie ich zoome, sehen sie aus wie Kreise, Rauten oder Quadrate und ich brauche es immer wie Kreise aussehen.

Answer 1

Mit%: https://jsfiddle.net/yzpuydtn/11/
Mit vw: http://jsfiddle.net/otwhu0uk/2/

Hier ist ein Beispiel. Ich hoffe wirklich, dass dir das hilft.

body { 
    /* Controls size of dot */ 
    background-image: radial-gradient(black 5%, white 0%); 
    /* Controls Spacing, First value will scale width, second, height between dots */ 
    background-size:5% 10%; 
} 

Answer 2

https://jsfiddle.net/yzpuydtn/9/
Mit JavaScript:

var setBackground = function(dotColor, backgroundColor, dotRadius, dotSpacing){ 
    // create string for background-image property 
    var image = 'radial-gradient(circle, '+dotColor+' '+dotRadius+'px, '+backgroundColor+' 0px)'; 
    // create string for background-size property 
    var size = dotSpacing+'px '+dotSpacing+'px'; 
    //set properties 
    document.body.style.backgroundImage = image; 
    document.body.style.backgroundSize = size; 
}; 

Beispiel:
setBackground('red','green','20','50');
oder
setBackground('rgb(255,165,0)','rgb(160,255,170)','10','60');
Hoffe, es hilft.