<img> 标签的渐变色答案

【问题标题】：gradient color to <img> tag<img> 标签的渐变色
【发布时间】：2021-11-20 01:26:07
【问题描述】：

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

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

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

【问题讨论】：

标签： html css reactjs frontend

【解决方案1】：

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

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

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

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

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

&lt;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"&gt;&lt;/div&gt;

您还可以在 CSS 中使用混合混合模式。

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

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

【讨论】：

【解决方案2】：

我有办法实现你所需要的，但要向 DOM 添加一些元素。

<div style={{ height: "200px", width: "200px", position: "relative" }}>
        <div
          style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            top: "0",
            left: "0",
            opacity: "0.73",
            background: "linear-gradient(to right, #16a085, #f4d03f)",
            zIndex: "2",
          }}
        />
        <img
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            top: "0",
            left: "0",
            zIndex: "1",
          }}
          src="https://assets.diarioconcepcion.cl/2020/11/Gas-natural.jpg"
        />
      </div>

我不知道另一种方法可以做到这一点，尽管我认为使用 css 的 :: after 属性可以做得更好，并且可以按照您在同一张图片中的要求完成。

【讨论】：