与css的老纸背景纹理

Question

是否可以使用看起来像旧纸的纯CSS(不使用图像)创建背景纹理,例如:http: //i.stack.imgur.com/kb0Zm.jpg

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

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

Answer 1

我可以建议我的解决方案吗？（在 Chrome v92+、Firefox v90+、Edge v92+ 上测试）。

一点盒子阴影：

    #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>

例如： 混合了 css 和 svg 的旧羊皮纸

Answer 2

背景图片生成站点

我在 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 调用的替代参数，这些参数看起来更像纸。如果我想出一个好的答案，我会更新我的答案。

_{（来源：thumbr.it）}

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