Wyświetlacz tle siatki za pomocą obrazu z CSS

Question

The UPDATED DEMO działa całkiem dobrze z wyjątkiem faktu, że obraz tła jest uzyskiwanie przeskalowane przy zmianie:

background-size: 20px 20px; 

Czy to możliwe, aby zachować oryginalny rozmiar obrazu i zrobić tło obrazy nakładają się (ukryj część obrazu, która przekracza lewe górne pole (20 pikseli x 20 pikseli))?

Plan B byłoby, aby przyciąć zdjęcie z JS w treści obrazu zestaw base64 ...

Answer 1

Korzystanie z svg obraz tylko z lewej i górnej granicy może być to, czego szukasz? Sprawdź fragment, albo ten jsfiddle (skrzypce zawiera przycisk do skalowania w górę/w dół siatkę):

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

Answer 2

Jedną z możliwości byłoby użycie gradientu CSS.
Poniższy przykład pokazuje to dla wzoru linii, ale można go łatwo rozszerzyć, aby uzyskać drugie tło w innym kierunku.
Należy również dodać prefiksy specyficzne dla przeglądarki, jeśli projekt wymaga kompatybilności wstecznej. Jeśli potrzebujesz obsługi starszych wersji IE, to podejście nie będzie działać.

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

Gorąco polecam nie używając przeskalowany obraz, jeśli mają na celu uzyskać ostre i solidne wyniki z tłem, które jest powtarzane houndreds czasu. Oto miły, w 100% programowy sposób na to, używając JS i Canvas. Cały blok JS, jak opisano tutaj, wykonuje około pół milisekundy.

Oto 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") + ')'; 

i HTML jest po prostu tak:

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

Wszystko, co musisz zrobić, to echo szerokość i wysokość, które wa do tego tagu płótnie (najlepiej przy użyciu od strony serwera) i wszystko zostanie wykonane automatycznie automatycznie.

Pozwolę sobie wyjaśnić: ctx.rect(-1, -1, ++w, ++h); Przyjmujemy żądaną szerokość i wysokość i wstawiamy je do zmiennych, a następnie, podczas malowania naszego prostokąta chcemy, aby szerokość zaczynała się od [-1, -1] coord, tak, że nie mamy lewej ani górnej obramowanie pomalowane (nie jest nam potrzebne, jeśli chcemy, aby nasz wzór układał się niecekowicie), a ++w i ++h zwiększają szerokość i wysokość prostokąta o jeden piksel, aby wyjść poza granice płótna i pozbawić tych dwóch niepotrzebnych granic.

Spróbuj zmienić width i height w znaczniku `canvas`` w skrzypce, którą stworzyłem i zobacz, czy podoba ci się wyjście.

W ten sposób możesz kontrolować szerokość linii i jej kolor.