Question

我正在从ajax调用中提取图像，并尝试将其添加到已建立的div中。 div已经包含了我想用作边框的图像。问题是，当我使用jQuery将图像HTML表示为div时，它将代替边框而不是占据同一位置。我明白为什么。但是，当我创建一个嵌套在上述div中的div并尝试将其放置在border-image之后（有效）时，该图像的边框大小无法很好地调整。

我尝试添加'border-image：url（./ image.png）'，但那不起作用。在将它发布到html之前，有什么方法可以将图像和边框与JQuery结合起来？还是有更好的方法通过CSS做到这一点？

我尝试添加'border-image：url（./ image.png）'，但那不起作用。

<div class="col s2" id="facePlate1">
<img src="./imageFrame.png">  
<div id="firstActor"></div>     
</div>

$("#firstActor").html(`<img class= "gifControl" src="${conc}"  alt="Gif"> 
</div>`)

我希望firstActor图像出现在边框图像的后面。

Answer 1

如果我是对的，则不应在jQuery函数中添加另一个结束div标签。 firstActor div已关闭。如果正确的话，您的新HTML将如下所示：

<div class="col s2" id="facePlate1">
  <img src="http://placekitten.com/150/150">  
  <div id="firstActor">
    <img src="http://placekitten.com/100/100">
  </div>     
</div>

并假设您要在上方放置一幅图片，使其看起来像一帧，则可以使用以下css来做到这一点

#facePlate1 {
  position: relative;
  display: inline-block;
}
#firstActor {
  position: absolute;
  top: -50%;
  left: -50%;
  transform: translate(100%,100%);
}

在此处输入密码：https://codepen.io/MortenDL/pen/dyyXdgW

Answer 2

我可以通过将边框图像作为图像包装器的背景来处理此问题，

#frame{
  background-image:url(https://via.placeholder.com/200);
  height: 200px;
  width: 200px;
}

#image{
  margin: 10px;
}

<div id="frame">
  <img id="image" src="https://via.placeholder.com/180">
</div>

如何将边框图像添加到动态创建的图像中？

2 个答案: