html - 在图像上叠加 PNG

Question

我正在尝试做一些可能非常简单的事情，但我无法理解它。

如果可能的话，我正在尝试使用 CSS 覆盖透明 PNG 并在另一张图片的顶部淡入淡出。我正在尝试实现此结果，但使用了两张图片，即实际图片，然后是创建淡入淡出的 PNG 叠加层。

What I'd Like to Achieve

它在一个使用特色图片系统的 WordPress 网站上，所以我想让我们的编辑变得简单，他们将能够简单地上传特色图片并自动淡入淡出叠加，无需编辑图片等或者创建一个已经带有淡入淡出效果的 PNG，因为这需要大量的图像编辑工作。努力简化流程。

The website for a look at the code

任何对此的帮助都会很棒!提前致谢!

Answer 1

您可以使用绝对位置属性将两个图像设置在彼此之上。为了更好地控制过滤图像，您可以使用 filter 属性并设置您想要的不透明度。此代码段显示了三个示例:一个过滤图像设置为 70%，一个设置为 50%，另一个设置为 0%。

.ref {
  position: relative;
  height: 200px;
  margin-bottom: 10px;
}

.imgMain {
  position: absolute;
  top: 0px;
  left: 0px;
}

.imgFilter {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(70%);
}

.imgFilter2 {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(50%);
}

.imgFilter3 {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(0%);
}

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter" src="https://picsum.photos/200?image=1022" />
</div>

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter2" src="https://picsum.photos/200?image=1022" />
</div>

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter3" src="https://picsum.photos/200?image=1022" />
</div>