Question

我需要将图像从CMS帖子移动到嵌入式CSS背景图像，以便可以将其显示为视差图像。我设法做到了这一点；

<div class="parallax-wrap">
  <div id="background-1">
   <section class="background-1 home-parallax"></section>
   <div class="row description">
    <div class="column small-12">
       <h2 class="text-center" style="margin:2em 0;">{{  title }} </h2>
       <div class="clear:both;"></div>
       <p><img src="https://cdn.ecommercedns.uk/...image.jpg" />Some description text here.</p>
    </div>
   </div>
  </div>
  <script>
    $(window).load(function() {
     if($(this).next().find('img').attr('src')!= "") {
      $('.background-1').css('background-image', function() {
        return 'url(' + $(this).next().find('img').attr('src') + ')'
      });
      $('.description img').remove();

     }
    });
  </script>
</div>

这在定义图像时在输出上显示；

<div class="parallax-wrap">
  <div id="background-1">
   <section class="background-1 home-parallax" style="background-image: url("https://cdn.ecommercedns.uk/...image.jpg");"></section>
   <div class="row description">
    <div class="column small-12">
       <h2 class="text-center" style="margin:2em 0;">Page Title</h2>
       <div class="clear:both;"></div>
       <p></p><p></p><p>Description Text</p><p></p>
    </div>
   </div>
  </div>
  <script>
    $(window).load(function() {
     if($(this).next().find('img').attr('src')!= "") {
      $('.background-1').css('background-image', function() {
        return 'url(' + $(this).next().find('img').attr('src') + ')'
      });
      $('.description img').remove();
     }
    });
  </script>
</div>

它可以工作，但是我需要考虑没有图像移动。当前，如果没有图像，则使用此 style =“ background-image：url（” undefined“）;” 离开嵌入式图像背景。

<div class="parallax-wrap">
  <div id="background-1">
   <section class="background-1 home-parallax" style="background-image: url(&quot;undefined&quot;);"></section>
   <div class="row description">
    <div class="column small-12">
       <h2 class="text-center" style="margin:2em 0;">Page Title</h2>
       <div class="clear:both;"></div>
       <p></p>
    </div>
   </div>
  </div>
  <script>
    $(window).load(function() {
     if($(this).next().find('img').attr('src')!= "") {
      $('.background-1').css('background-image', function() {
        return 'url(' + $(this).next().find('img').attr('src') + ')'
      });
      $('.description img').remove();
     }
    });
  </script>
</div>

我认为最好的方法是首先避免这种情况的发生，并在图像确实存在的情况下创建整个section标签。

我需要删除该-或-使用jQuery创建该部分，而不是首先将内联样式添加到现有键中。

Answer 1

通过获取attr('src')，您只能通过HTML标记src来获得其全部价值，例如，如果您有一个带有<img src='test.png'>的图片并且可以这样做。

$('img').attr('src');，它将返回test.png。但是，如果要通过css（背景图片）添加它，则必须 $('img').css('background-image');对于您的情况，它将返回'url(undefined)';

所以我认为这应该为您解决。

$(window).load(function() {
 if($(this).next().find('img').css('background-image') != 'url("undefined")') {
  $('.background-1').css('background-image', function() {
    return 'url(' + $(this).next().find('img').attr('src') + ')'
  });
  $('.description img').remove();
 }
});

我建议以正确的方式进行操作，并通过jquery本身对其进行检查，但是就像您说的那样，您对jQuery不友好，我想它应该可以完成工作。

Answer 2

<div class="parallax-wrap">
  <div id="background-1">
   <section class="background-1 home-parallax">
    <div class="caption">
     <span class="border">{{ title }}</span>
    </div>
   </section>
   <div class="row description">
    <div class="column small-12">{{ description|raw }}</div>
   </div>
  </div>
  <script>
    $('.description div').each(function(){
     if($(this).find('img').length){

         $('.background-1').css('background-image', function(){
          return 'url(' + $(this).next().find('img').attr('src') + ')'
         });
         $('.description img').remove();
     } else {

         $('.parallax-wrap').remove();

     }
    });
  </script>
</div>

如果存在未定义的嵌入式背景图片，请使用jQuery删除DIV

2 个答案: