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

Question

我有一个想法:

1. 图案固定背景
2. 图案背景的白色背景图层
3. "透明"文本，也就是通过白色背景透明，所以图案背景作为文本。

对于那些比我聪明的人…这可能吗?如果有，那是怎么回事?

文本透明度是足够容易的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(所有&ie8 +， -webkit-前缀Android 2.x)
• How-to (with fallbacks &捕获):http://css-tricks.com/image-under-text/

第二个是使用SVG (SVG.js)

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

我相信一些文本到位图的选项也必须存在。