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

Posted 2023-05-08

【中文标题】如何将边框图像添加到动态创建的图像？

【英文标题】：How can I add a border image to a dynamically created image?

【发布时间】：2020-02-13 09:30:02

【问题描述】：

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

我尝试添加一个“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"  > 
</div>`)

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

【问题讨论】：

你也可以发布你的css吗？

【参考方案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

【参考方案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>