背景图像生成器站点

Question

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

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

有没有办法在CSS中执行此操作？

Answer 1

背景图像生成器站点

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

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

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

reinstall

欢迎任何人建议该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

我可以建议我的解决方案吗？

有点阴影：

    #parchment {
  position: absolute;
  display: flex;
    width: 75%;
  min-height: calc((1vw + 1vh) * 75);
  /* center page with absolute position */
  top: 0%; left: 50%; transform: translate(-50%, 0);
  margin: 2em 0;
    padding: 4em;
    box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
    background: #fffef0;
  filter: url(#wavy2);
}

和一些SVG feTurbulence作为过滤器：

<svg>
  <filter id="wavy2">
    <feturbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feturbulence>
    <feDisplacementMap in="SourceGraphic" scale="20" />
  </filter>
</svg>

例如： Old parchment with a mix of css and svg

Answer 3

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

Answer 4

我不喜欢某种不可能的想法。一切皆有可能！！在这种情况下，它非常难：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-index以及..痛苦的屁股：D

Answer 5

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

与css的老纸背景纹理

5 个答案:

背景图像生成器站点