在CSS中使用任意偏移量重复背景

Question

10

我想知道在CSS中是否可以用任意偏移量重复背景？我的意思是每次渲染时都可以将图块向x和y方向移动若干像素。这样做的用途包括马赛克、图案等，甚至可以实现等距平铺。例如，如果我有一个10px x 10px的图块，每次重复出现时，我希望它向上移动10px，这样就可以实现以下效果。

[//]
    [//] 
        [//]
            [//]

那么，有没有现成的解决方案？还是说 Canvas 是一个可行的选择（将内容绘制在 Canvas 上，然后将其用作背景）？

- ShrekOverflow

你可以使用 background-position 结合 background-repeat 来实现偏移平铺。不过我不确定这是否是你所要求的，你有没有一个样例图片来展示你想要实现的效果但不知道如何实现呢？ - Niels Keurentjes

你能否创建一个Fiddle以演示你所说的内容，我正在尝试制作ASCII艺术 ^_^ - ShrekOverflow

@NielsKeurentjes 完成了 ^ 现在是否使 esne？ - ShrekOverflow

你可能需要在画布中完成它。 - jeremy

最好使用WebGL，因为我知道DOM不是正确的选择...制作3D ... WebGL听起来更好。 - ShrekOverflow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Audet · Accepted Answer

在CSS3中，仅使用CSS样式无法实现此操作。重复的图案可以在水平方向x、垂直方向y、同时在两个方向上或者单一图像中周期性出现。