与css的老纸背景纹理

Question

是否可以使用看起来像旧纸的纯CSS（不使用图像）来创建背景纹理，例如像这样：http://i.stack.imgur.com/kb0Zm.jpg

我知道存在局限性，纹理不需要像示例那样复杂。

有没有办法在CSS中这样做？

Answer 1

Background Image generator site

我在2016年发现的最好的是这个API，它可以创建一个噪声纹理图像。它不是基于聪明的CSS3，但我只是张贴这个，因为其他答案都没有实现OP想要的东西。

http://www.cssmatic.com/noise-texture

请注意，该站点的输出CSS代码错误。它应该是这样的：

body {
    background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}

欢迎任何人建议该API调用的替代参数看起来更像纸。如果我找到一个好的，我会更新我的答案。

http://api.thumbr.it/whitenoise-600x200.png?background=f8faebff&noise=6c702d&density=17&opacity=15

它在我的个人网站上看起来不错，并向您展示了纯白色是多么不自然以及它对人眼有多么不舒服：http://netgear.rohidekar.com/inventory/books.html

Answer 2

正如这里所回答的那样（How to create a texture paper background using CSS without image）Dustin说，没有“纹理”CSS功能。但是，如果你正在使用CSS3，你可以做一些非常酷的技巧，如渐变或阴影，以使一些整洁的背景。

Answer 3

我不喜欢某种不可能的想法。一切皆有可能！！在这种情况下，它非常难：D如果你在这个例子中制作了478800个<div>元素（在你的示例图像中为600x798像素）并将它们视为像素，最后将它们放在绝对位置。您可以获得图像的精确副本。

<div style="top: 0; left: 0; posistion: absolute; width: 1px; height: 1px; background-color: #112233;"></div>
<div style="top: 0; left: 1; posistion: absolute; width: 1px; height: 1px; background-color: #112433;"></div>
<div style="top: 0; left: 2; posistion: absolute; width: 1px; height: 1px; background-color: #111234;"></div>
.. etc

在这种情况下，它甚至可以使用更少的元素，但你必须使用z索引以及..痛苦的屁股：D

Answer 4

不，你能用CSS做的最好是一些渐变。 http://www.colorzilla.com/gradient-editor/