仅使用 css 的旧纸背景纹理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14585101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Old paper background texture with just css
提问by Macman
Is it possible to create a background texture with pure CSS (without using an image) that looks like an old paper, e.g. like this: http://i.stack.imgur.com/kb0Zm.jpg
是否可以使用纯 CSS（不使用图像）创建看起来像旧纸的背景纹理，例如：http: //i.stack.imgur.com/kb0Zm.jpg
I' aware that there are limitations, the texture does not need to be as complex as the example.
我知道有一些限制，纹理不需要像示例那样复杂。
Is there a way to do this in CSS?
有没有办法在 CSS 中做到这一点？
回答by Sridhar Sarnobat
Background Image generator site
背景图片生成站点
The best I found in 2016 was this API that creates a noise texture image. It's not based on clever CSS3 but I'm just posting this since none of the other answers achieve what the OP wants anyway.
我在 2016 年发现的最好的是这个 API，它可以创建噪声纹理图像。它不是基于聪明的 CSS3，但我只是发布这个，因为其他答案都没有达到 OP 想要的。
http://www.cssmatic.com/noise-texture
http://www.cssmatic.com/noise-texture
Note the site has the wrong output CSS code. It should be something like:
请注意该站点有错误的输出 CSS 代码。它应该是这样的：
body {
background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}
Anyone is welcome to suggest alternative parameters to that API call that look more like paper. I'll update my answer if I come up with a good one.
欢迎任何人建议该 API 调用的替代参数，这些参数看起来更像纸。如果我想出一个好的答案，我会更新我的答案。
(source: thumbr.it)
（来源：thumbr.it）
It looks decent on my personal site, and shows you just how unnatural pure white is and how uncomfortable it is on human eyes: http://netgear.rohidekar.com/inventory/books.html
它在我的个人网站上看起来不错，并向您展示了纯白色是多么不自然以及它在人眼上是多么不舒服：http: //netgear.rohidekar.com/inventory/books.html
回答by Milche Patern
As answered here ( How to create a texture paper background using CSS without image) Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.
正如这里所回答的（如何在没有图像的情况下使用 CSS 创建纹理纸背景）达斯汀说，没有“纹理”CSS 功能。然而，如果你使用 CSS3，你可以做一些非常酷的技巧，比如渐变或阴影来制作一些整洁的背景。
回答by Harmen de Vries
I don't like the thought of something not being possible. Everything is possible!! In this case its just very hard :D If you'd make in this example 478800 <div>elements (600x798 pixels in your example image) and treat them like pixels and finally position them absolute. You can get a exact copy of your image.
我不喜欢认为不可能的事情。一切皆有可能！！在这种情况下，它非常困难 :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
In this case it's even possible to use less elements, but you have to work with z-indexes aswell.. Pain in the ass :D
在这种情况下，甚至可以使用更少的元素，但您还必须使用 z-indexes .. 屁股痛：D
回答by MadCom
No, best you can do with CSS is some gradient. http://www.colorzilla.com/gradient-editor/
不，你能用 CSS 做的最好的事情就是渐变。http://www.colorzilla.com/gradient-editor/
