时间戳

首页 > 解决方案 > 如何将图像放在另一个图像上

javascript - 如何将图像放在另一个图像上

问题描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

  <style>
    .page {
      /*width: 58.3396%; 
        height: 16.914%;*/
      width: 30%;
      height: 5%;
      transform: matrix3d(0.93, 0.36, 0.00, 0, -0.36, 0.93, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-transform: matrix3d(0.93, 0.36, 0.00, 0, -0.36, 0.93, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
  </style>
</head>

<body>
  <div>
    <img src="./img/background.jpg" class="img-fluid">
    <img src="./img/img1.jpeg" class="page">
  </div>
</body>

</html>

如何将图片放在绿色和蓝色背景上？是否可以为此目的仅使用 css，例如使用 3d 转换函数？

标签： javascripthtmlcss

解决方案

更新

你可以这样做：

使用matrix3d transform：

div {
  width: 400px;
  position: relative;
}
div img {
  width: 100%;
}
div span:nth-of-type(1) {
  background: url(https://picsum.photos/375/151?image=990) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 151px;
  transform: matrix3d( 0.548752   ,  0.14839    , 0, -0.000261138, 
                      -0.533756   ,  0.203838   , 0, -0.000359532, 
                       0          ,  0          , 1,  0          ,
                      91          , 95          , 0, 1
  );
  transform-origin: 0 0;
}
div span:nth-of-type(2) {
  background: url(https://picsum.photos/240/200?image=991) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 200px;
  transform: matrix3d( 0.320781, 0.0786819, 0, -0.000358941, 
                      -0.236755, 0.3753   , 0, -0.000196034, 
                       0       , 0        , 1, 0, 
                     252       , 46       , 0, 1
  );
  transform-origin: 0 0;
}
<div>
  <img src="https://i.stack.imgur.com/ppZGY.jpg" alt="" />
  <span></span>
  <span></span>
</div>

矩阵元素是使用此工具得出的：https ://math.stackexchange.com/a/339033/65531

老的

这是可行的。但我不知道如何轻松做到这一点。

在这里，我有一个不适合 100% 的示例，但您应该看到该方法。

您必须在 and上玩perspectiveand和, , , and on才能做到正确。perspective-origindivtoplefttransformwidthheightspan

你看我没有完全正确。这些值是通过实验大量得出的，我不知道你将如何准确地得到它们。

div {
  width: 400px;
  position: relative;
  perspective: 1000px;
  perspective-origin: -533px -361px;
}

div img {
  width: 100%;
}

div span:nth-of-type(1) {
  background: url(https://picsum.photos/175/151?image=990) no-repeat;
  background-size: cover;
  position: absolute;
  width: 175px;
  height: 151px;
  top: 96.3px;
  left: 91px;
  transform: rotateX(93deg) rotateY(362deg) rotateZ(53deg);
  transform-origin: 0 0;
}
<div>
  <img src="https://i.stack.imgur.com/ppZGY.jpg" alt="" />
  <span></span>
  <span></span>
</div>

推荐阅读