Javascript 使用CSS使图像变暗

我有一个带有图像背景的div：

<div class="image-cover" style={{ backgroundImage: 'url(' + item.image + ')' }}>
      <div className="name">{item.name}</div>
</div>

这是React代码，但基本上上面的div将图像应用为背景

我想把图像变暗，可能是渐变，这样只有底部是暗的，然后逐渐恢复到正常状态。我搜索的几乎所有地方都提到在CSS中添加图像作为参考。然而，在我的例子中，图像url只有在运行时才知道，并且应用在html中

---

我如何在这里变暗我的div？

你可以简单地将图像和渐变结合起来，就像这样

div{ 高度：200px； 宽度：500px； 背景图像： 线性渐变黑色， 透明20%， 透明80%， 黑色 urlhttp://lorempixel.com/500/200/nature/1/; }

---

您可以简单地组合图像和渐变，如下所示

div{ 高度：200px； 宽度：500px； 背景图像： 线性渐变黑色， 透明20%， 透明80%， 黑色 urlhttp://lorempixel.com/500/200/nature/1/; }

---

我能够通过在div的：：before伪元素上使用线性渐变背景来实现这种效果。其思想是使用其：：before伪元素或另一个div覆盖div，但伪元素不添加任何额外的元素，然后对伪元素应用渐变背景：

.image-cover {
    position: relative;
}

.image-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Adjust the color values to achieve desired darkness */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}

---

下面是一个例子来展示它的实际效果。

我能够通过在div的：：before伪元素上使用线性渐变背景来实现这种效果。其思想是使用其：：before伪元素或另一个div覆盖div，但伪元素不添加任何额外的元素，然后对伪元素应用渐变背景：

.image-cover {
    position: relative;
}

.image-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Adjust the color values to achieve desired darkness */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}

下面是一个用于显示其实际效果的示例。

插入框阴影 优点：代码薄，不需要额外的伪元素

缺点：对于当前的w3标准，框阴影大小和偏移值只能是绝对值而不是百分比值，因此，如果JavaScript不计算元素的尺寸，则无法解决阴影元素的动态/各种大小

有更好的答案，所以我只是想把它作为一个额外的选项

div{ 显示：内联块； 背景：urlhttp://unsplash.it/200/200; 宽度：200px； 高度：200px； } .变黑了{ 框阴影：插入0-200px 200px-100px rgba0,0,0,9； } 插入框阴影 优点：代码薄，不需要额外的伪元素

缺点：对于当前的w3标准，框阴影大小和偏移值只能是绝对值而不是百分比值，因此，如果JavaScript不计算元素的尺寸，则无法解决阴影元素的动态/各种大小

有更好的答案，所以我只是想把它作为一个额外的选项

div{ 显示：内联块； 背景：urlhttp://unsplash.it/200/200; 宽度：200px； 高度：200px； } .变黑了{ 框阴影：插入0-200px 200px-100px rgba0,0,0,9； }

---

元素可以有多个背景，您想从代码中设置它吗

让imageURL=https://i.stack.imgur.com/QqkeF.png; // 示例图像 设cssURL=url+imageURL+；//转换为CSS url声明 设梯度=线性梯度到顶部，rgba0，0，0，1，rgba255，0，0，0； divElement.style.backgroundImage=gradient+，+cssURL； 分割元素

---

元素可以有多个背景，您想从代码中设置它吗

让imageURL=https://i.stack.imgur.com/QqkeF.png; // 示例图像 设cssURL=url+imageURL+；//转换为CSS url声明 设梯度=线性梯度到顶部，rgba0，0，0，1，rgba255，0，0，0； divElement.style.backgroundImage=gradient+，+cssURL； 分割元素

---

在顶部绘制div是一个选项吗？是一个选项，但没有渐变选项。如果这正是您需要的，我认为@texelate走上了正确的道路。@texelate当然是一个选项……Sass对于这样的事情真的很好。他们有内置的功能，可以帮助您加深图像。在顶部绘制div是一个选项吗？是一个选项，但没有渐变选项。如果这正是您需要的，我认为@texelate走上了正确的道路。@texelate当然是一个选项……Sass对于这样的事情真的很好。他们有内置的功能，可以帮助您加深图像。你觉得你还能帮我一件事吗？如果我还想在图像顶部变暗怎么办？顶部和底部都很暗。@Prabhu如果是这种情况，你可以在线性渐变参数的末尾添加额外的颜色，例如：线性渐变到顶部，rgba0，0，0，0.75，rgba0，0，0，0.25，rgba0，0，0，0.75将在顶部和底部创建一种暗化，中间有点轻，你能再帮我一个忙吗？如果我还想在图像顶部变暗怎么办？顶部和底部都很暗。@Prabhu如果是这样的话，你可以在底部添加一个额外的颜色 D的线性梯度参数，例如：线性梯度到顶部，RGBA0，0, 0，0.75，RGBA0，0, 0，0.25，RGBA0，0, 0，0.75将产生一种黑暗在顶部和底部，然后在中点稍轻。