Css 平铺背景中行的不同x背景位置

我想创建一个平铺背景，其中背景的每一行都有一个随机的x偏移。这将是理想的，但如果CSS不可能做到这一点（我认为不可能），那么至少使用单个图像来创建身体背景的最佳方法是什么，在这个背景中，这几行（比如说4行）图像具有不同的x位置

比如：

IMAGEIMAGEIMAGEIMAGE MAGEIMAGEIMAGEIMAGEI AGEIMAGEIMAGEIMAGEIM GEIMAGEIMAGEIMAGEIMA IMAGEIMAGEIMAGEIMAGE MAGEIMAGEIMAGEIMAGEI AGEIMAGEIMAGEIMAGEIM GEIMAGEIMAGEIMAGEIMA 影像 图像 AGEIMAGEIM Geimageima 影像 图像 AGEIMAGEIM Geimageima

---

你的图像有多大？如果是非常小的，一个简单的解决办法是在photoshop/paint中这样做。生成的图像会大4倍，但对于小图像（读取小于25ko），我认为这是迄今为止最简单的方法。至少我没有看到任何简单的CSS解决方案

如果您的图片非常大，并且您知道它的高度，您最终可以采用以下方法：

这个想法是在

z-index:-1

处创建几个div，其中

高度==图像高度

和绝对位置具有不同的左值。。。我认为这是一个粗糙但有效的解决方案

var mybody = document.getElementById('body');
var bodyHeight = mybody.offsetHeight;
var imgHeight = 49; // you could get the size by opening the file
var offsetLines = 4; // this is the number of offset you asked, but you can change that!
var nbOfLines = Math.ceil(bodyHeight/imgHeight);
for(var i=0; i<nbOfLines; i++){
    var newBgDiv = document.createElement('div');
    newBgDiv.className = 'backgroundImg imgOffset_'+(i%offsetLines);
    newBgDiv.style.top = (i*imgHeight) + 'px';
    newBgDiv.style.height = imgHeight + 'px';
    newBgDiv.style.width = '100%';
    mybody.appendChild(newBgDiv);
}

var mybody=document.getElementById（'body'）；
var bodyHeight=mybody.offsetHeight；
var imgHeight=49；//您可以通过打开文件来获取大小
var offsetline=4；//这是您要求的偏移量，但您可以更改它！
var nbOfLines=数学单元（身高/身高）；
对于（var i=0；i，如果CSS3适合您的项目，您可以使用多个背景来实现这一点

制作一个两倍于图案高度的图像，上半部分填充图案，下半部分透明

然后使用多个背景对其进行相应的定位，如下所示：

.div {
    background: url(path/to/image.png) 0 0 repeat,
                url(path/to/image.png) 0 {height of image in pixel} repeat
}

这不是一个随机偏移量，但如果有足够多的变化，就很难区分它们之间的区别

如果你想增加感知到的随机性，请看。
做一把小提琴来帮助你准确地了解你需要的东西…最新浏览器的非常有趣的方法！！谢谢你的链接：令人惊奇的东西\o/除此之外，人们永远不要忘记a）png文件比jpg文件大，并且b）透明度具有不容忽视的成本。我发现对于重复的颜色图案，使用png可以获得非常好的压缩比。我建议您最大限度地利用压缩（仅限Mac），您完全正确！谢谢你的链接（mac->猜对了！）。我并不是说使用png不好，只是人们（我不是说你）很容易忘记这些细节。如果我把我的话放在这里，那是因为有些用户可能想要两行以上，比如说6行。在这种情况下，您的png图像将比原始图像高6*左右，透明度约为83%。所谓“足够多的变化”，您的意思是，如果我想要4行不同的图像，我将使用底部3/4透明的png图像，对吗？蝉链太棒了，谢谢你，克拉克！顺便说一句，对于我的图像（大约240x120），带有图像和3个透明行的png与带有3个图像行、质量为9的jpg一样重。因此，在权重方面，空行png似乎没有赢得那么多（至少对于少数行），JPG还可以在非CSS3浏览器上工作。很好，这确实可以用于为bg生成真正随机的x偏移。对于额外的div，浏览器可能会有一些渲染开销，但可能没有那么糟糕……这实际上取决于图片的大小。如果你有一张>100px高的图片，其开销是荒谬的（它会给你的网站增加大约10div）。如果你的图片小于100px，你应该选择photoshop/paint并简单地打印出来：）