css - 如何使用 css 创建纹理效果？

Question

你可以在这里看到它完成http://qunitjs.com/并在这里分解http://jsfiddle.net/xMwT8/8/ *编辑(http://jsfiddle.net/xMwT8/9/)

链接可用

• > here
• > here
• > here
• > here

我正在尝试使用图像作为纹理，上面有叠加颜色或与图像结合以混合成微妙的纹理。它可以用渐变来完成(就像我发布的第一个和第二个链接)。我不明白为什么它不能只使用一种颜色(第二个链接)。

Answer 1

我认为您是在问为什么不能使用像#E4E2D6 这样的纯色来做到这一点。简单的解释是它是一种纯色颜色:)

jsfiddle 示例使用 rgba(255, 0, 0, 0.3) 这不是纯色，它是 70% 透明的红色(a == 0.3 表示它只有 30% 的不透明度)

如果你想用#E4E2D6之类的东西来做，看看Convert RGB to RGBA over white并将其转换为相同颜色的 rgba(87, 74, 0, 0.16)(当显示在白色上时，但它大部分是透明的)并且允许背景通过。

---

好的，刚刚查看了 /9 fiddle(仅供引用，您可以更改原始链接而不是进行那样的编辑)。这似乎不适用于

background: rgba( ... ), url( ... );

为什么？因为你只能有多个背景图片。就浏览器而言，-webkit-linear-gradient 是一个图像，因此它同时使用了两者。 rgba( ... ) 没有它是一种颜色，所以它使用图像和颜色作为后备