如何使用渐变CSS对图像进行半暗处理？

Question

我需要使给定图像的一半变暗。我知道这里可以在CSS中使用渐变，但是我不知道如何适当地使用它。

以下是HTML代码：

<div>
  <img class="another_image" src="img/file1.jpg" alt="file1">
</div>

这是CSS代码：

.another_image{
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;]
}

应该是这样的：

这就是我现在拥有的

Answer 1

您可以对背景图像应用渐变

.grad {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%), url('http://placekitten.com/300/300') no-repeat;
}

<div class="grad">
</div>

<img src="http://placekitten.com/300/300" />

Answer 2

您可以在具有背景渐变的容器上使用:: after伪元素。这是一个小提琴https://jsfiddle.net/qcw6u7ze/1/

<div class="imgWrap">
    <img src="https://placehold.it/350x200">
</div>

.imgWrap {
    position: relative;
    display: inline-block;
}

.imgWrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 
   100%);
}

Answer 3

查看以下问题：How do I combine a background-image and CSS3 gradient on the same element?

这应该有帮助：

body {
  height: 500px;
  background: linear-gradient(
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(https://www.vegetables.co.nz/assets/Uploads/vegetables.jpg);
}

请注意，height属性是必需的。

https://jsfiddle.net/z1kygnb6/

Answer 4

您可以如下所示设置线性渐变：

const orders = [[1, 2], [1,2], [2]];

const imageCount = orders.reduce((s, a) => s + a.length, 0);

console.log(imageCount);

working solution