Как я могу добавить изображение границы к динамически созданному изображению? - PullRequest
Новая
       36

Как я могу добавить изображение границы к динамически созданному изображению?

0 голосов
/ 16 октября 2019

Я извлекаю изображение из вызова ajax и пытаюсь добавить его в установленный div. Div уже содержит изображение, которое я хотел бы использовать в качестве границы. Проблема в том, что когда я использую jQuery для преобразования изображения в указанный div, он занимает место границы, а не занимает одно и то же место. Я понимаю почему. Тем не менее, когда я создаю div, вложенный в вышеупомянутый div, и пытаюсь расположить его за границей изображения (что работает), изображение не очень хорошо изменяется с границей.

Я попытался добавить 'border-image: url (./ image.png) 'но это не хочет работать. Можно ли как-нибудь объединить изображение и рамку с JQuery перед публикацией в HTML или есть лучший способ сделать это с помощью 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>`)

Мне бы хотелось, чтобы изображение первого актера появилось за границей изображения.

Ответы [ 2 ]

0 голосов
/ 16 октября 2019

Я бы справился с этим, сделав изображение границы фоном обёртки изображения, вот так: 

#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>
0 голосов
/ 16 октября 2019

Если я прав, вам не следует добавлять еще один закрывающий тег div в вашу функцию jQuery. Первый актер 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

...