使用translateX多次创建静态背景？

Question

我有一个背景的想法，我想用它填充视口。我已经创建了几个静态svg文件，但是它们对于较小的屏幕来说太大了(文档大小设置为4000x2200px)，并且它们不是像素完美的，这在某些比例下会显示出来。我可以只有一个裁剪(视窗高度)的translateX重复足够的次数来填充背景吗？

This is my end-effect with hand-crafted file。

我认为不需要动画。

例如，是否可以将直线居中，同时将其在x轴上向左和向右平移，这样它就会充满屏幕？

Answer 1

你正在寻找的是一个重复的背景模式，可以在CSS3中使用，而不是自己手动复制图像。在CSS使用中：

    html { 
        background: url(https://i.stack.imgur.com/Gowoj.png) repeat; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

这应该会让你得到一个无限重复的曲折线条模式！如果你想让图片不那么粗糙，那就试着把正方形图片变小一点，然后用你的图片所在位置的URL来替换图片的URL (注意URL中没有引号)