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

Question

我希望创建类似于此链接的文本覆盖。如果你看到它，文本的颜色与 div 颜色形成对比，给人的感觉是文本被主 div 颜色的某些外层覆盖。我怎样才能达到这个效果？

Answer 1

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

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

您可以自己检查一下，只需：

• 在 Chrome 中，右键单击数字并检查元素
• 在 Firefox 中，使用Firebug
• 在 Internet Explorer（版本 8+）中按 F12
• 其他浏览器也有它们的等价物

rgba()在此处阅读有关 CSS3的信息

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

Answer 2

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

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

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