对文本和图像的渐变效果

Question

如何为页面上的内容创建渐变效果，例如UCMA上的内容。有一个背景图像和文本和图像显示背景图像的颜色，给出了渐变效果。如何创建类似的效果（非静态渐变效果）？

website

也是所有CSS或者是否有任何可以实现结果的Javascript库？

Answer 1

两个div容器相互重叠。一个具有背景，另一个包含css属性mix-blend-mode设置为screen的文本和图像

具有背景的div应该有position: absolute;和完整width以及height

mix-blend-mode: screen;

我创建了一个fiddle来演示。

IE或Opera不支持

mix-blend-mode。阅读更多相关信息here。

Answer 2

对于Text，您可以通过演示阅读以下链接：

http://cssdeck.com/labs/css3-text-gradient

对于Image，您可以通过在图片上添加过滤器来实现：

https://css-tricks.com/almanac/properties/f/filter/

他们在网站上使用了什么过滤器？

-webkit-filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);
filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);