hiển thị lưới nền bằng cách sử dụng hình ảnh với CSS

Question

Các UPDATED DEMO công trình khá tốt ngoại trừ một thực tế là hình nền bị thay đổi kích cỡ khi tôi thay đổi:

background-size: 20px 20px; 

Có thể giữ cho kích thước ảnh gốc và làm cho nền hình ảnh chồng lên nhau (ẩn một phần của hình ảnh vượt quá hộp trên cùng bên trái (20px 20px))?

Kế hoạch B sẽ được để cắt ảnh với JS trong nội dung hình ảnh bộ base64 ...

Answer 1

Sử dụng một hình ảnh svg chỉ với một viền trái và đầu có thể là những gì bạn đang tìm kiếm? Kiểm tra các đoạn mã, hoặc này jsfiddle (fiddle chứa nút để mở rộng quy mô lên/xuống lưới):

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

Answer 2

Một lựa chọn sẽ được sử dụng một gradient CSS.
Phần dưới đây minh họa điều này cho một mẫu đường kẻ, nhưng bạn có thể dễ dàng mở rộng mẫu này để có nền thứ hai theo hướng khác.
Bạn cũng sẽ cần thêm bất kỳ tiền tố cụ thể nào cho trình duyệt nếu dự án của bạn yêu cầu khả năng tương thích ngược. Nếu bạn cần hỗ trợ các phiên bản IE cũ hơn, cách tiếp cận này sẽ không hoạt động cho bạn.

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

tôi sẽ khuyên không sử dụng hình ảnh thu nhỏ nếu bạn đang hướng tới để có được kết quả sắc nét và vững chắc với một nền tảng đó được lặp lại houndreds thời gian. Đây là một cách tốt đẹp, 100% để làm điều này bằng cách sử dụng JS và Canvas. Toàn bộ khối JS như được mô tả ở đây mất khoảng một nửa milisecond để thực thi.

Đây là 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") + ')'; 

Và HTML là đơn giản này:

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

Tất cả bạn cần làm là echo chiều rộng và chiều cao mà bạn wan't vào thẻ canvas này (tốt nhất sử dụng phía máy chủ công nghệ bạn là usig) và mọi thứ sẽ được thực hiện tự động.

Hãy để tôi giải thích điều này: ctx.rect(-1, -1, ++w, ++h); Chúng tôi đang lấy chiều rộng và chiều cao mong muốn và đặt nó vào biến, sau đó, khi vẽ hình chữ nhật của chúng tôi, chúng tôi muốn có chiều rộng để bắt đầu tại [-1, -1] coords, để chúng tôi không có trái và trên cùng biên giới sơn (chúng tôi không cần nó nếu chúng ta muốn mô hình của chúng tôi để ngói niecely), và ++w và ++h chỉ là tăng chiều rộng và chiều cao hình chữ nhật vẽ bằng một pixel để vượt ra ngoài ranh giới của vải và do đó dải hai biên giới unnecesarry.

Hãy thử thay đổi width và height trong thẻ `canvas`` trong fiddle mà tôi đã tạo và xem bạn có thích đầu ra không.

Đi theo cách này bạn cũng có thể kiểm soát độ rộng của đường kẻ cũng như màu của nó.