Question

我的网站上有重复的背景图片。

background: url(images/back_small.png) repeat center center fixed;

但是，如果图像没有重复一个副本，我想要更多，添加一些变化。最终结果应该是一种点状图案，其中图像时不时出现，而不是立即重复。

我不知道这是否可以用CSS，但如果是这样......我在等待想法：D

Answer 1

我建议使用多种背景技术的变体，您可以根据素数在图像周围保存不同大小的透明“空间”。

它被称为the Cicada Principle on this site。

素数引入“随机性”。当然，如果您不希望它们以任何方式重叠，那么您需要非常精确地选择要使用的图像尺寸，以确保在正常尺寸的显示器显示中不会发生直接重叠。

Answer 2

没有办法真正完成你在纯CSS中所要求的内容。然而，我看到人们使用多个图像将“噪音”引入网站的背景中。

以下是使用multiple backgrounds with CSS的示例。

以下是关于noise in gradients的stackoverflow问题。

希望这能为您提供一些想法，让您了解自己想要的网站。

Answer 3

我的解决方案是使用相同的图像两次（我们可以放置任意数量的背景图像）。然后使用不同的重复 x 和背景位置来决定背景的最终外观。我的解决方法如下：

background-color: white;
background-image: url(../../../../../assets/images/my-watermark.png),
  url(../../../../../assets/images/my-watermark.png);
background-repeat: repeat-x, repeat-x;
background-position-y: -60px, 400px;
background-position-x: -150px, -270px;

CSS：随机分布的背景图片？

3 个答案: