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

Question

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

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

因为这很明显。有没有什么技术可以把另一张图片放在第一张图片上而不用第一张图片作为背景图片。

Answer 1

试试这个：

 <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。

Answer 2

请查看下方link

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

您将通过使用简单的 css 更改和不透明度功能

获得您想要的内容

Answer 3

将图片标签放入容器中，先将positions设置为absolute，然后设置前后图片的z-index 属性，再设置图片的ocupacy

            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>

Answer 4

我们打算为此使用 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" alt=""/>
  <img class="image-overlay" src="https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg" alt="" />
</div>

旁注：虽然 z-index 可能有用，但我尽量避免使用它。它会导致最新版本的 webkit 中出现一些严重的错误，尤其是 iOS 中的 safari 实现。如果您对 html 元素进行了正确排序，则无需使用 z-index。当然，除非你必须这样做。

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

How to put a partially transparent image above another image in html?

html

javascript

css

image

opacity