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定位元素的父级，我们强制它使用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中引起了一些令人讨厌的错误，特别是在iOS中的safari实现。如果您正确订购了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>

了解更多解决方案，请检查此link。

Answer 3

请查看以下链接

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

使用简单的css更改＆amp; amp;你会得到你想要的东西。不透明度功能

Answer 4

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

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

4 个答案: