将图像放在透明图像后面

时间:2017-11-02 20:18:53

标签: html image

我试图将一张图片放在另一张图片后面?

https://jsfiddle.net/emtao7wo/12/

enter image description here

<style>
    #img1 {
        position: absolute;
      clip-path: circle(85px at center);
    }
</style>

<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113" style="top:41px;left:13px;">

<img width="180" height="180" src="http://i.imgur.com/4HJbzEq.png">

2 个答案:

答案 0 :(得分:0)

从img1样式更改左侧和顶部值。例如:style="top:33px;left:5px;"如果不是,您要查找的内容,请提供更多信息。

答案 1 :(得分:0)

  <style>
    #img1 {
      position: absolute;
      clip-path: circle(85px at center);
      z-index:99;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }

    .front {
      position: absolute;
      z-index: 98;
    }

    </style>

<div style="position:relative; width:180px; height:180px">
    <img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113">
    <img width="180" height="180" src="https://i.imgur.com/4HJbzEq.png" class="front">
</div>

https://www.w3schools.com/code/tryit.asp?filename=FL5GB343CY4X