将背景图像放大到透明图像或div中

Question

一旦看到图像，问题就会很难理解。我想复制这个图像而不使用图像编辑软件，我知道模糊背景图像的可能性，并想知道它是否可以做同样的缩放。我也愿意使用canvas / JavaScript

Answer 1

以下是使用clip-path：

的想法

＆＃13;

＆＃13;

.box {
  height:300px;
  width:600px;
  background:var(--i) center/100% auto no-repeat; 
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--i) center/200% auto no-repeat;
 clip-path: polygon(50% 20%, 70% 50%, 50% 80%, 30% 50%);
}

＆＃13;

<div class="box" style="--i:url(https://picsum.photos/2000/1000?image=1069)">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用相同的背景图像创建div元素并放大它。

从图像开始：

glass = document.createElement("DIV");
img.parentElement.insertBefore(glass, img);

你可以创造一个＆＃34;玻璃＆＃34; div并把它放在图像上：

glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";

然后你使用与背景相同的图像：

glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";

并根据需要进行缩放：

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
}

magnify("myimage", 3);

为了创建您需要的形状，您可以使用此网站Clip maker

这是一个完整的例子：

＆＃13;

＆＃13;

* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
}
.img-magnifier-glass {
  position: absolute;
  width: 50px;
  height: 100px;
  top: 50px;
  left: 125px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

＆＃13;

<div class="img-magnifier-container">
  <img id="myimage" src="https://www.w3schools.com/howto/img_fjords.jpg" width="300" height="200">
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

我希望它可以帮助你，再见。