html - 渐变颜色到 <img> 标签

Question

如何为图像标签添加渐变颜色？这是我目前所拥有的

<img style={{height:'100vh', width:'100%', backgroundColor:"linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%)"}} src={data.image} />

但是渐变在图像后面，我想要的是在图像上应用渐变

Answer 1

1. 您可以简单地将 img 添加到带有 background-image: linear-gradient 的 div 中，并使用 z-index: -1 作为 img。 我已经为您在 codepen 上创建了一些示例:

https://codepen.io/orsisi/pen/PojXWBW

 <div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)); width:100%; height: 600px"><img style="z-index:-1; position: relative;" src="https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg"/></div>

1. 或者您可以考虑使用一个 div 和您的图像，该图像在具有 background-image: linear-gradient 属性的同一 div 中通过 url 引用。 https://codepen.io/orsisi/pen/JjJwEKw

请注意，如果您在 div 上使用此样式，则需要具有 alpha 0-1 值的 rgba 颜色，因为它定义了透明度。否则渐变将覆盖图像而不是透明的。 底线:简单的 rgb 是行不通的。

<div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)), url(https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg); width:100%; height: 600px"></div>

您还可以在 CSS 中使用 mix-blend-modes。

1. 这个使用multiply-blend-mode: multiply 您可以尝试不同的混合模式，as listed here.

https://codepen.io/orsisi/pen/xxLKbeW