在平铺背景中，行之间有不同的背景位置？

Question

在平铺背景中，行之间有不同的背景位置？

cssbackgroundbackground-image

3

我想创建一个平铺背景，其中每一行的背景具有随机的x偏移量。如果这是可能的话最好了，但如果用CSS不行（我认为不行），那么至少使用单个图像的最佳方法是什么，以创建一个身体背景，其中该图像的几行（假设为4）具有不同的x位置？

类似于：

图像图像图像图像像图像图像图像I 像图像图像图像IM 像图像图像图像IMA 图像图像图像图像像图像图像图像I 像图像图像图像IM 像图像图像图像IMA

- astgtciv

1

制作一个小工具来帮助你准确地获取所需内容... - Sri

2个回答

0

如果您的项目适用于CSS3，您可以使用多个背景来实现此目的。

创建一个高度是您图案两倍的图像，将顶部一半填充为您的图案，底部一半透明。

然后使用多个背景将它们相应地定位，如下所示：

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

这不是一个随机偏移量，但如果有足够的变化，很难分辨出差异。

如果你想增加感知的随机性，请看看这篇文章。

- Clark Pan

非常有趣的方法，适用于最新版本的浏览器！！感谢您提供的链接：神奇的东西\o/除此之外，人们应该永远不要忘记a) PNG文件比JPG文件大，b) 透明度具有不可忽略的成本。 - leMoisela

我发现对于重复的颜色模式，使用png可以获得非常好的压缩比。我推荐使用这个工具（http://imageoptim.com/）以获得最佳压缩效果（仅适用于Mac）。 - Clark Pan

你说得完全正确！感谢提供链接（mac -> 猜得不错！）。我并不是说使用png是不好的，只是人们（我不是指你）很容易忘记这种细节。如果我在这里发表评论，那是因为有些用户可能想要超过2条不同的线，比如6条。在这种情况下，你的png图像将比原始图像高6倍，透明度约为83%。 - leMoisela

“足够的变化”是指如果我想要4个不同的行，我会有一个底部3/4透明的png，对吗？蝉的链接很棒，谢谢Clark！ - astgtciv

顺便说一下，对于我的图像（大约240x120），带有图像和3个透明行的PNG与具有3个图像行的9质量JPG一样重。因此，在重量方面，空行PNG似乎并没有赢得那么多（至少对于少量行而言），而且JPG还可以在非CSS3浏览器上使用。 - astgtciv

是的，这就是我们之前讨论的。PNG可能很神奇，但主要缺点（至少在某些情况下）是它具有无损压缩，因此它始终比等效的JPG图片更大（后者具有有损压缩）。我建议对于小尺寸图片（如cicada链接中的示例），采用Clark的方法，而对于像您的大图片，则应采用js解决方案。使用JPG，并生成约5个div->没有真正的开销。 - leMoisela

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

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

- leMoisela · Accepted Answer

你的图片尺寸是多少？如果非常小，一个简单的解决方案是在Photoshop/Paint中处理。生成的图像将会变为原来的4倍大，但对于小图片（小于25ko），我认为这是最简单的方法。至少我没有看到任何简单的CSS解决方案来解决你的问题。

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

这个想法是创建几个

，它们的z-index:-1和height == image_height，并且使用不同的left值进行绝对定位...我认为这是一种粗略但可行的解决方案。

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。

在我的示例中，偏移量取决于窗口的大小（尝试水平调整窗口大小，您会发现偏移量会更改）。当然，您也可以将其固定为定义的像素数！