使用带有 CSS 的图像显示背景网格

Question

UPDATED DEMO 工作得很好，除了背景图像在我更改时会调整大小：

background-size: 20px 20px;

是否可以保持原图大小，让背景图重叠（隐藏超过左上框（20px 20px）的部分图片）？

B 的计划是在 set base64 图像内容中使用 JS 裁剪图像...

Answer 1

使用只有左边框和上边框的 svg 图像可能是您想要的？检查 sn-p 或 jsfiddle（小提琴包含放大/缩小网格的按钮）：

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

Answer 2

一种选择是使用 CSS 渐变。
下面演示了这种线条图案，但您可以轻松地将其扩展为在另一个方向上具有第二个背景。
如果您的项目需要向后兼容，您还需要添加任何特定于浏览器的前缀。如果您需要支持较旧的 IE 版本，则此方法不适合您。

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

如果您的目标是在重复数百次的背景下获得清晰而稳定的结果，我强烈建议您不要使用缩放图像。这是使用 JS 和 Canvas 实现此目的的一种很好的 100% 编程方式。此处描述的整个 JS 块大约需要半毫秒才能执行。

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

HTML 就是这样的：

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

您需要做的就是将您不希望的宽度和高度回显到此画布标签中（最好使用您所使用的服务器端技术），一切都会自动完成。

让我解释一下：ctx.rect(-1, -1, ++w, ++h); 我们将所需的宽度和高度放入变量中，然后，在绘制矩形时，我们希望它的宽度从 [-1, -1] 坐标开始，这样我们就没有左侧和顶部边框绘制（如果我们希望我们的图案平铺侄女，我们不需要它），++w 和 ++h 只是将绘制的矩形宽度和高度增加一个像素以超出画布的边界和从而去除这两个不必要的边界。

尝试在我制作的小提琴中的“canvas”标签中更改width和height，看看你是否喜欢输出。

通过这种方式，您还可以控制线条的宽度和颜色。