сценарий, который может перечислить фоновые изображения CSS в виде тега изображения HTML? - PullRequest
Новая
       17

сценарий, который может перечислить фоновые изображения CSS в виде тега изображения HTML?

0 голосов
/ 06 октября 2018

Я использую конструктор сайтов Showit для некоторых своих клиентов, но я только что понял, что большинство изображений, размещаемых на сайте, размещаются с использованием CSS background-image, а не в HTML как теги изображений.

Проблема в том, что клиент не может использовать кнопку Pin-It в Pinterest, так как расширение ищет теги изображений HTML.

Существуют ли сценарии, которые могут получить фоновые изображения CSS и добавлять их в виде тегов изображений HTML, чтобырасширение Pinterest может видеть изображения?

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

С чистым Javascriptp это можно сделать с помощью 

<style>
#item {
    width: 800px;
    height: 600px;
    background: url('img-01.jpg') no-repeat;
}
</style>
<script>
function showImage(id, alt) {
    bg = document.getElementById(id);
    style = bg.currentStyle || window.getComputedStyle(bg, false), bi=style.backgroundImage.slice(4, -1).replace(/"/g, "");
    document.write('<img src="' + bi + '" alt="' + alt + '">');
}
</script>
<div id="item">
    <script>showImage('item', 'This is my photo')</script>
</div>
0 голосов
/ 06 октября 2018

Это может сработать.Вы также можете сделать что-то похожее с jQuery: 

var imgs = document.getElementsByTagName('img');
for(x=0; x<imgs.length; x++){
    try{
      var imgurl = imgs[x].style.backgroundImage;
      if (imgurl) {
        var newimg = document.createElement("img");
        newimg.src = imgurl;
        document.body.appendChild(newimg);
      }
    } catch(e) {}
}

Так что это перебирает найденные изображения и извлекает атрибут background-image.

...