如何在CSS中创建文本叠加？

Question

我希望创建类似于此link的文字叠加层。如果你看到它，文本的颜色与div颜色形成对比，给人的感觉是文本被主div颜色的某些外层覆盖。我如何实现这种效果？

Answer 1

我为你使用了Chrome Inspector。这是数字上的一种风格：

.metro .count {
    /*...*/
    color: rgba(0, 0, 0, 0.20);
}

您可以自己查看，只需：

在Chrome中
• ，右键点击数字和“检查元素”
在Firefox中
• ，使用Firebug
通过按F12 在Internet Explorer（版本8+）中
• 其他浏览器也有其等价物

Read about CSS3 rgba() here

  

此属性名称中的“a”代表，因为您猜对了：alpha。这个   新功能允许我们为颜色指定不透明度值。

Answer 2

该页面使用半透明阴影 - text-shadow规则 - 有效地使文本周围背景的颜色变暗。这是他们使用的CSS

text-shadow: 0 1px rgba(0, 0, 0, 0.3);

rgba(0, 0, 0, 0.3)解析为黑色，不透明度为30％。