CSS文本透明度通过多个图层

Question

我在脑海里想要创造：

1. 带图案的固定背景
2. 白色背景层超出图案背景
3. ＆＃34;透明＆＃34;通过白色背景透明的文字，使图案背景成为文本。

对于那些比我更聪明的人......这甚至可能吗？如果是这样的话？

文字透明度很容易rgba(0,0,0,0.1)，但我无法将其超越白色图层。

到目前为止的代码：

#inner-header {
background: url('../images/white.png'), url('../images/angusplaid.png');
position: fixed;
z-index: 1;
}

#logo a {
color: rgba(0,0,0,0.1)
}

有没有办法让白色背景只在文字的位置透明？我有疑虑，但我希望无论如何都能解决它。

干杯。

Answer 1

您有多种选择：

第一个是CSS background-clip。

• 浏览器支持：请参阅http://caniuse.com/#search=background-clip（Android 2.x的所有＆amp; IE 8 +，-webkit-前缀）
• 操作方法（使用后备和捕获）：http://css-tricks.com/image-under-text/

第二个是SVG（SVG.js）

• 浏览器支持：请参阅https://svgdotjs.github.io/compatibility/
• 如何：见https://svgdotjs.github.io。复制主页上的示例。您在<name>中输入的var drawing = SVG('<name>')必须是您要输入的div的ID。

我确定某些文本到位图选项也必须存在。