javascript 如何将照片放在照片上[复制]

dpiehjr4  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(148)
    • 此问题在此处已有答案**:

HTML, CSS - image inside image, how to do that?(4个答案)
45分钟前就关门了。
请帮助我,因为我不能单独做。我如何将JS或HTML应用到一张照片(作为背景)到另一张照片(没有背景的框架)?我会补充说,第二张照片(没有背景)应该放置在第一张照片/图片的特定点上。这样的事情是可能的吗?

<div class="m">
  <img src="picture1.jpg" style="width:100%">
  <img src="picture2.jpg" style="width:100%">
</div>
a5g8bdjr

a5g8bdjr1#

#m {
  width: 100px;
  height: 100px;
  position: relative;
}
#img1,
#img2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#img2 {
  z-index: 10;
  margin: 20px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!--
      Need a visual blank slate?
      Remove all code in `styles.css`!
    -->
    <link rel="stylesheet" href="styles.css" />
    <!-- <script type="module" src="script.js"></script> -->
  </head>
  <body>
    <div id="m">
      <div id="img1">
        <img src="https://picsum.photos/seed/picsum/200/200" />
      </div>
      <div id="img2">
        <img width="50px" height="50px"
          src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs"
        />
      </div>
    </div>
  </body>
</html>

相关问题