Css 文本和图像的梯度效应

如何为页面上的内容创建渐变效果，如图所示。有一个背景图像，文本和图像显示背景图像的颜色，从而产生梯度效果。如何创建类似的效果（非静态渐变效果）

---

也就是说，是所有的CSS，还是有任何Javascript库可以实现这个结果？

有两个

div

容器相互重叠。一个带有背景，另一个包含css属性

mix-blend mode

设置为

screen

带背景的div应具有

位置：绝对和全
宽度
和
高度

mix-blend-mode: screen;

我创建了一个示例来演示

IE或Opera不支持混合模式。阅读更多相关信息。
有两个
div
容器放置在彼此上方。一个带有背景，另一个包含css属性
mix-blend mode
设置为
screen

带背景的div应具有
位置：绝对和全
宽度
和
高度

mix-blend-mode: screen;

我创建了一个示例来演示

IE或Opera不支持混合模式。阅读更多信息。
对于
文本
，您可以通过演示阅读以下链接：



对于
图像
，您可以通过在图像上添加过滤器来完成此操作：


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

-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);

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



对于
图像
，您可以通过在图像上添加过滤器来完成此操作：


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

-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);

谢谢，你的解决方案就是我想要的非静态梯度效果。你认为支持IE和Opera的最佳方式是什么？例如，在白色背景上设置颜色：黑色规则，以便使内容仍然连贯和可读？我已经更新了fork。新增
位置：绝对以支持IE和Opera。颜色已设置为黑色，因此当不支持
混合模式时。它将是白色背景上的黑色文本。我在你的提琴中注意到的一件事是，如果你添加了更多的内容（即两块lorem ipsum文本），它们在视口高度后滚动页面时不可见。内容被截断，只有白色背景。因为第一个div上的高度值为100%。它是
jsfiddle
中结果部分的大小。您可以设置
min height
值或将像素值设置为height。谢谢，您的解决方案就是我想要的非静态渐变效果。你认为支持IE和Opera的最佳方式是什么？例如，在白色背景上设置颜色：黑色规则，以便使内容仍然连贯和可读？我已经更新了fork。新增
位置：绝对以支持IE和Opera。颜色已设置为黑色，因此当不支持
混合模式时。它将是白色背景上的黑色文本。我在你的提琴中注意到的一件事是，如果你添加了更多的内容（即两块lorem ipsum文本），它们在视口高度后滚动页面时不可见。内容被截断，只有白色背景。因为第一个div上的高度值为100%。它是
jsfiddle
中结果部分的大小。您可以设置
min height
值或将像素值设置为height。