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

Question

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

类似于:

IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA

Answer 1

您的图像尺寸是多少？如果它非常小，一个简单的解决方案是在 photoshop/paint 中执行此操作。生成的图像会大 4 倍，但对于小图像(读取小于 25ko)，我认为这是迄今为止最简单的方法。至少我没有看到任何简单 CSS 解决方案来解决您的问题。

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

我的想法是在 height == image_height 的 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);
}

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

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