25

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

我知道有限制，纹理不需要像示例那样复杂。

有没有办法在 CSS 中做到这一点？

4

4 回答 4

15

我可以建议我的解决方案吗？（在 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的旧羊皮纸

于 2020-08-27T11:57:51.917 回答
7

背景图像生成器站点

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

在此处输入图像描述
（来源：thumr.it）

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

于 2016-12-01T06:09:18.700 回答
1

正如这里所回答的（如何使用没有图像的 CSS 创建纹理纸背景）达斯汀说，没有“纹理”CSS 功能。然而，如果你使用 CSS3，你可以做一些很酷的技巧，比如渐变或阴影来制作一些整洁的背景。

于 2013-01-29T14:42:24.150 回答
0

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

于 2013-01-29T14:28:39.970 回答