Question

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

类似的东西：

IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA

Answer 1

你的形象大小是多少？如果非常小，那么 easy 解决方案就是在photoshop / paint中做到这一点。得到的图像将大4倍，但对于小图像（读取小于25ko），我认为这是迄今为止最简单的方法。至少我没有看到任何 easy CSS解决方案来解决您的问题。

如果你的照片非常大并且你知道它的高度，你最终可以采用以下方法：http://jsfiddle.net/7GPTy/

我们的想法是在z-index:-1 height == image_height创建几个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);
}

快速浏览js代码，我基本上得到页面的高度并将其除以图片的高度，以了解我必须创建多少div才能生成整个背景。完成后，您只需定义所需的不同行偏移的数量（offsetLines），然后生成div。

在我的示例中，偏移量取决于窗口的大小（尝试水平调整窗口大小，您将看到偏移量发生变化）。您当然可以将其修复为定义的像素数！

Answer 2

如果CSS3适合您的项目，您可以使用多个背景来执行此操作。

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

然后使用多个背景来相应地定位它们：

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

它不是随机偏移，但如果有足够的变化，就很难区分它。

如果您想添加感知的随机性，请查看this post。

行的不同的x背景位置在铺磁砖的背景中

2 个答案: