Question

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

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

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

我想使图像变暗，可能是渐变，只有底部是暗的，并且渐渐变为正常。我搜索的几乎每个地方都提到在CSS中添加图像作为参考。但是，就我而言，图像URL仅在运行时才知道，并应用于html。

我怎样才能让我的div变暗？

Answer 1

您可以简单地组合图像和渐变，就像这样

＆＃13;

div {
  height: 200px;
  width: 500px;
  background-image:
    linear-gradient(black,
                    transparent 20%,
                    transparent 80%,
                    black),
    url(http://lorempixel.com/500/200/nature/1/);
}

＆＃13;

<div></div>

＆＃13;

或者使用伪元素，比如

＆＃13;

div {
  height: 200px;
  width: 500px;
  background: url(http://lorempixel.com/500/200/nature/1/);
}
div::after {
  content: '';
  display: block;
  height: 200px;
  width: 500px;
  background: linear-gradient(transparent, black);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

我能够通过在linear-gradient的{{1}}伪元素上使用div背景来实现这一效果。我们的想法是用::before伪元素（或另一个div覆盖::before，但伪元素不添加任何额外元素），然后应用渐变背景到伪elemetn：

div

这是一个JSFiddle来展示它的实际效果。

Answer 3

Inset Box-Shadow

优势：代码纤薄，无需额外的伪元素

缺点：当前w3标准的框阴影尺寸和偏移值可以仅限绝对（非百分比），因此动态/各种尺寸如果没有JavaScript计算元素维度，则无法解决阴影元素的问题。

有更好的答案，所以我只是把它作为一个额外选项（更糟糕）。

＆＃13;

div {
  display: inline-block;
  background:url(http://unsplash.it/200/200);
  width:200px;
  height:200px;      
}

.darkened{
  box-shadow: inset 0 -200px 200px -100px rgba(0,0,0,.9);
}

＆＃13;

<div></div>
<div class="darkened"></div>

＆＃13;

Answer 4

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

＆＃13;

let imageURL = "https://i.stack.imgur.com/QqkeF.png"; // an example image
let cssURL = "url( "  + imageURL + ")"; // convert to CSS url declaration
let gradient = "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 0, 0, 0))";
divElement.style.backgroundImage = gradient + "," + cssURL;

＆＃13;

<div id="divElement" style="height:128px; width: 256px;">
    #divElement
</div>

＆＃13;

＆＃13; ，

基本上将运行时已知的图像URL转换为CSS url声明，创建您选择的CSS渐变模式，并将它们作为逗号分隔列表添加到元素样式的backgroundImage属性中属性。

我使用全局变量divElement进行测试 - 根据需要使用document.getElementById。

编辑：查看你的代码，将背景图片列表放在模板中应该相当容易：编写上面的独立代码以检查它是否有效:-)

使用CSS使图像变暗

4 个答案:

Inset Box-Shadow