0

我有一个带有重复背景图片的网站。

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

但是，如果图像没有一个接一个地重复，我会更喜欢它，以添加一些变化。最终结果应该是一种点状图案，图像不时出现，而不是立即重复。

我不知道这是否可以通过 CSS 实现，但如果是这样......我正在等待想法：D

4

3 回答 3

5

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

在这个网站上它被称为蝉原理。

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

于 2013-06-28T19:45:46.387 回答
2

我的解决方案是两次使用相同的图像（我们可以放置尽可能多的背景图像）。然后使用不同的 repeat-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;
于 2021-02-01T07:02:08.073 回答
1

没有一种方法可以完全按照您在纯 CSS 中的要求进行操作。然而，我看到人们使用多张图像将“噪音”引入网站背景。

这是一个在 CSS 中使用多个背景的示例。

这是一个关于梯度噪声的stackoverflow问题。

希望这能给您一些想法，让您了解您在网站上想要的内容。

于 2013-06-28T19:35:49.007 回答