html - 在图像上应用线性渐变的最佳方法是什么？

Question

我试图通过线性渐变使图像底部稍微暗一些，但我无法让它工作。我不确定我做错了什么。

我尝试在 css 中使用 ::after，就像我在其他网站上看到的那样，我尝试使用 ID，我尝试在 css 中直接使用 `background-image`` 但我做不到似乎让它工作。我也试过让渐变只影响图像、整个部分、整篇文章，但仍然不起作用。我不知道还能尝试什么。

.Series {
  background-color: transparent;
  background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

<section id="Series">
  <img class="imgshadow" src="cara2.jpg" width="240">
  <div class="texto1">text</div>
  <h1 class="subtext1">text</h1>
</section>

Answer 1

你可以考虑mix-blend-mode :

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

此外，将您的选择器从类 . 修改为 id #。

#Series {
  background-color: transparent;
  background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

img {
  mix-blend-mode: overlay
}

body {
  background: purple
}

<section id="Series">
  <img class="imgshadow" src="http://dummyimage.com/200/0df" width="240">
  <div class="texto1">text</div>
  <h1 class="subtext1">text</h1>
</section>