时间戳

首页 > 解决方案 > Wrap an Image with transparent image without using position:absolute , top ,left ,right and bottom

html - Wrap an Image with transparent image without using position:absolute , top ,left ,right and bottom

问题描述

Is there a way to wrap an Image with transparent image without using position:absolute and top , left ,bottom and right positions ,I have tried to add div then img with transparent image url but it shows only the second image.

for example : 

<style>
  .Image{
     width:100px;
     height:100px;
     border-radius: 50%;
   }
</style>

<div class="Image" style="background-image:'url(./assets/Image.png)'">
   <img class="Image" src="url(./assets/trans-image.png)"/>
</div>

enter image description here

标签： htmlcss

解决方案

像这样的东西？您可能必须根据您选择的图像更改每个图像的背景位置，因为我的图像大小相同。

.overlay-image {
  width: 300px;
  height: 100vh;
  background-image: url(https://i.ibb.co/GvXnt0J/top-img.png), url(https://i.ibb.co/VvdwhTc/bottom-img.png);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  background-size: contain;
}
<div class="overlay-image"></div>

推荐阅读