Question

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

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

它位于使用特色图像系统的WordPress网站上，因此我想简化我们的编辑人员的工作，使他们能够简单地上传特色图像并自动具有淡入淡出效果，而无需编辑图像等或已创建带有淡入淡出的PNG，因为这将需要大量图像编辑工作。试图简化过程。

任何与此有关的帮助都将是惊人的！预先谢谢你！

Answer 1

You can use the absolute position property to set the two images on top of each other. To have greater control over the filtering image, you can use the filter property and set the opacity you would like it at. This snippet shows three examples: One where the filtering image is set to 70%, one at 50%, and the other at 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>

在图片上覆盖PNG

1 个答案: