Question

我正在尝试自定义作品集在我的网站上的显示方式。与其将特色图像显示为图像，我不希望将其显示为div的背景图像。因此，我想做的就是复制src属性并设置为其父级的css背景图像，并将其设置为显示的每个工作项。

这是我正在使用的HTML结构以及我使用的jQuery代码

<div class="caroufredsel_wrapper">
   <ul class="portfolio-items">
      <li>
        <div class="work-item">
           <img class="custom-thumbnail" src="../wp-content/Project.jpg">
        </div>
      </li>
      <li>
        <div class="work-item">
           <img class="custom-thumbnail" src="../wp-content/Project2.jpg">
        </div>
      </li>
   </ul>
</div>


<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $(".work-item").find("img").each(function(n, image){
                var image = $(image);
                var thisUrl = $(this).attr("src");
                image.parents(".work-item").css("background-image", "url(' + thisUrl + ')");
            });
        });
    }(jQuery));
</script>

但不是将链接设置为背景图像，而是我得到的输出

<div class="work-item" style="background-image: url('+ thisUrl +');">
     <img class="custom-thumbnail" src="../wp-content/Project.jpg">
</div>

Answer 1

您需要将url(' + thisUrl + ')替换为url(" + thisUrl + ")

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $(".work-item").find("img").each(function(n, image){
                var image = $(image);
                var thisUrl = $(this).attr("src");
                image.parents(".work-item").css("background-image", "url(" + thisUrl + ")");
            });
        });
    }(jQuery));
</script>

Answer 2

如果没有jQuery，另一件事同样容易完成（我发现它更容易）：

document.addEventListener('DOMContentLoaded', () => {
  for (const img of document.querySelectorAll('.work-item img')) {
    img.parentElement.style.backgroundImage = `url(${img.src})`;
  }
})

<div class="caroufredsel_wrapper">
   <ul class="portfolio-items">
      <li>
        <div class="work-item">
           <img class="custom-thumbnail" src="../wp-content/Project.jpg">
        </div>
      </li>
      <li>
        <div class="work-item">
           <img class="custom-thumbnail" src="../wp-content/Project2.jpg">
        </div>
      </li>
   </ul>
</div>

复制<img> src属性并将其设置为背景图像

2 个答案: