sfondo del display griglia utilizzando immagini con i CSS

Question

I UPDATED DEMO funziona abbastanza bene, tranne per il fatto che l'immagine di sfondo è sempre ridimensionata quando cambio:

background-size: 20px 20px; 

E 'possibile mantenere le dimensioni dell'immagine originale e rendere sfondo le immagini si sovrappongono (nascondono la parte dell'immagine che supera la casella in alto a sinistra (20px 20px))?

Il piano B sarebbe quello di ritagliare l'immagine con JS nel contenuto dell'immagine insieme base64 ...

Answer 1

Utilizzando un'immagine SVG con solo un bordo sinistro e la parte superiore può essere quello che stai cercando? Controllare il frammento, o di questo jsfiddle (il violino pulsante contiene per scalare su/giù la griglia):

body{ 
 
    background: url('http://testbed.nicon.nl/img/_FBs3b.svg') repeat; 
 
    background-size: 20px 20px; 
 
}

Answer 2

Una possibilità sarebbe quella di utilizzare un gradiente CSS.
Il seguente esempio mostra un modello di linea, ma è possibile estenderlo facilmente per avere un secondo sfondo nell'altra direzione.
È inoltre necessario aggiungere prefissi specifici del browser se il progetto richiede la compatibilità con le versioni precedenti. Se hai bisogno di supportare versioni precedenti di IE, questo approccio non funzionerà per te.

var target = $('#target'); 
 
$('#in').on("change", function() { 
 
    var value = ~~($(this).val()); 
 
    value = Math.max(value, 2); 
 
    $(this).val(value); 
 
    target.css('background-size', value); 
 
}).trigger("change");

#target { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 2px solid #CCC; 
 
    margin-top: 5px; 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="in" type="number" value="20" /> 
 
<div id="target" />

Answer 3

vi consiglio vivamente di non utilizzare l'immagine in scala, se si ha intenzione di ottenere risultati nitidi e solidi con uno sfondo che si ripete houndreds di tempo. Ecco un bel modo programmato al 100% per farlo usando JS e Canvas. L'intero blocco JS come descritto qui impiega circa mezzo millisecondo per essere eseguito.

Ecco il jsFiddle

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

var w = c.getAttribute('width'); 
var h = c.getAttribute('height'); 
var color = c.getAttribute('data-color'); 
ctx.rect(-1, -1, ++w, ++h); 
ctx.lineWidth = 1; 
ctx.strokeStyle = color; 
ctx.stroke(); 

var body = document.getElementsByTagName('body')[0]; 
body.style.backgroundImage = 'url(' + c.toDataURL("image/png") + ')'; 

E HTML è semplicemente questo:

<canvas id="myCanvas" width="20" height="20" data-color="#666666" style="display:none">Your browser does not support the HTML5 canvas tag.</canvas> 

Tutto quello che dovete fare è eco la larghezza e l'altezza che si wan't in questo tag canvas (migliore usando la tecnologia lato server si usa) e tutto sarà fatto automaticamente .

Mi spiego: ctx.rect(-1, -1, ++w, ++h); Stiamo prendendo la larghezza e l'altezza desiderata e di metterlo in variabili, poi, quando la pittura il nostro rettangolo che vogliamo è la larghezza di iniziare a [-1, -1] coordinate, in modo che non ci hanno lasciato e superiore border painted (non ne abbiamo bisogno se vogliamo che il nostro pattern tegoli nettamente), e ++w e ++h sta semplicemente incrementando la larghezza e l'altezza del rettangolo dipinto di un pixel per andare oltre il confine di tele e quindi togliere quei due bordi inutili.

Prova a cambiare width e height nel tag `canvas`` nel violino che ho creato e vedi se ti piace l'output.

In questo modo è possibile controllare anche la larghezza della linea e il colore.