如何将部分透明的图像放在 html 中的另一个图像上方？

Posted 2023-03-06

【中文标题】如何将部分透明的图像放在 html 中的另一个图像上方？

【英文标题】：How to put a partially transparent image above another image in html?

【发布时间】：2016-06-12 02:08:15

【问题描述】：

我想将一张图片放在另一张图片上方，这样当我将第二张图片设为部分透明时，将看到第一张图片。但我不想将第一张图片的背景图片用作

 <div style="background-image: url("firstImage.png");">
    <img src="secondImage.png"/>
 </div>

因为这很明显。有没有什么技术可以在不将第一张图片作为背景图片的情况下将另一张图片放在第一张图片上。

【问题讨论】：

可以分享图片吗？

根据您的描述，我不是 100% 确定我理解您在寻找什么，但听起来您正在寻找的东西可以通过使用 css 定位将一个图像放在另一个图像上来复制（在您的情况下可能是绝对或相对定位）

@Frondor 您可以考虑任意两张图片，但我会更改第一张图片上方的图片的不透明度，以便也可以看到第一张图片。

我认为简单来说，您必须为 2 个图像保留两个占位符。使两个容器都具有绝对位置，因此一个位于上方。保持父级相对定位。然后你可以改变第二张图片的不透明度

【参考方案1】：

我们将为此使用 css。 position 语句允许 absolute 和 relative 定位。

通过设置position:absolute，我们可以相对于文档的(0,0) 定位元素。然后您可以使用top、bottom、left、right 来进一步定位元素相对于这些边缘的位置。

position:relative 类似于 html 元素的默认定位。但是，通过将 position:relative 添加到 absolute 定位元素的父元素，我们强制它使用父元素的 (0,0)，而不是文档的。

.layered-image 
  position: relative;

.layered-image img 
  height: 200px;
  width: 300px;

.image-overlay 
  position: absolute;
  top: 30px;
  left: 30px;
  opacity: .4

<div class="layered-image">
  <img class="image-base" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" />
  <img class="image-overlay" src="https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg"  />
</div>

附注：虽然z-index 可能很有用，但我尽量避免使用它。它会在最新版本的 webkit 中引起一些讨厌的错误，尤其是 safari 在 ios 中的实现。如果您正确订购 html 元素，则无需使用z-index。当然，除非你必须这样做。

【参考方案2】：

试试这个：

 <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="firstImage.png" alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="secondImage.png" alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
 </div>

更多解决方案请查看link。

【讨论】：

这不是关于“。背景图像通过使用 IMG 标签放置的部分透明的 secondImage.png 清晰可见。这仅供参考。但是，我不想 [将第一张图片放入任何元素作为背景图片。

我已经编辑了我的答案，希望对您有所帮助。我已经添加了我参考的链接。

【参考方案3】：

将图片标签放入容器中，先将位置设置为绝对位置，然后设置前后图片的z-index属性，然后设置图片的占用率。

            img 
     width: 300px;
     height: 300px;
     position: absolute;
   
   
   img.front 
     z-index: 2 opacity: 0.6;
     filter: alpha(opacity=60);
   
   
   img.back 
     z-index: 1
   

  <div>
  <img class="back" src="http://all4desktop.com/data_images/original/4237684-images.jpg" />
  <img class="front" src="http://www.hdwallpapery.com/static/images/creativity_water_spray_drops_flower_rose_desktop_images_TVIdSpG.jpg" />

</div>

【参考方案4】：

请查看以下链接

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

您将通过使用简单的 css 更改和不透明度功能获得所需的内容