如何在HTML中的另一张图片上方放置部分透明的图片？

Question

我想在另一个图像上方放置一个图像，以便当我使第二个图像部分透明时可以看到第一个图像。 但是我不想将背景图像用作第一张图像

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

很明显。 是否有任何技术可以将另一张图像放在第一张图像上而不将第一张图像作为背景图像。

Answer 1

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

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

position:relative与HTML元素的默认位置类似。 但是，通过position:relative对于absolute定位元素的父元素添加position:relative ：，我们强制其使用partent的（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中引起一些讨厌的错误，尤其是Safari在iOS中的实现。 如果您正确地订购html元素，则无需使用z-index 。 当然，除了必须的时候。

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

有关更多解决方案，请检查此链接 。

Answer 3

请检查以下链接

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

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

Answer 4

将图像标签放入容器中，首先将位置设置为绝对位置，然后设置背面或正面图像的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>