css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名

Posted 2021-05-13

<script>
  
$( ".siteBottom section" ).each(function() {
  
  if ($(this).find('.sidebar').children().length == 0){
    
     $(this).find('.sidebar').hide();
    
}  else {   
  
  var bg_url = $(this).find('.contentImg').css('background-image').split('/').pop().split('-').shift();
  $(this).addClass(bg_url);
  
  if ( $( this ).is( '.M_full_img, .M_left_img, .M_left_imgC, .M_right_imgC, .M_right_img' ) ) {
    
  var bg_url_image =  $(this).find('a.overlayImg').attr('href'); 
  var bg_url_class = $(this).find('a.overlayImg').attr('href').split('large/').pop().split('.').shift();
  $(this).prepend('<div class="backgroundImage"></div>');
  $(this).find('.backgroundImage').css('background-image', 'url(' + bg_url_image + ')');
  $(this).addClass(bg_url_class);
  $(this).find('.sidebar').hide();
    
  } else {
    $(this).removeClass(bg_url);
  }

}
  
});
  
</script>

/* ---------------------------------- */
/* ------ BACKGROUND IMAGE CSS ------ */
/* ---------------------------------- */

.siteBottom section * {
  box-sizing: border-box;
}

.siteBottom section {
  position: relative;
}

.M_full_img, .M_left_img, .M_left_imgC, .M_right_img, .M_right_imgC {
  padding: 60px 0;
}

.backgroundImage {
  position: absolute;
  background-size: cover;
  background-position: center center;
}

/*-- full width image --*/

.M_full_img .backgroundImage {
  top: 0; left: 0; right: 0; bottom: 0;
}

/*-- image left --*/

.M_left_img .backgroundImage {
  top: 0; left: 0; bottom: 0; 
  width: 50%;
}

.M_left_img .container {
  width: 50%;
  margin: 0 0 0 auto;
  padding: 0 5%;
}

/*-- image right --*/

.M_right_img .backgroundImage {
  top: 0; right: 0; bottom: 0; 
  width: 50%;
}

.M_right_img .container {
  width: 50%;
  margin: 0 auto 0 0;
  padding: 0 5%;
}

/*-- image left cover --*/

.M_left_imgC .backgroundImage {
  top: 0; left: 0; right: 0; bottom: 0; 
}

.M_left_imgC .container {
  width: 50%;
  margin: 0 0 0 auto;
  padding: 0 5%;
}

/*-- image right cover --*/

.M_right_imgC .backgroundImage {
  top: 0; left: 0; right: 0; bottom: 0; 
}

.M_right_imgC .container {
  width: 50%;
  margin: 0 auto 0 0;
  padding: 0 5%;
}

@media all and (max-width: 700px){
  
  .M_full_img, .M_left_img, .M_left_imgC, .M_right_img, .M_right_imgC {
    padding: 40px 0;
  }  

  .M_left_img, .M_right_img {
      padding: 0;
  }

  .siteBottom section .container {
    padding: 40px 20px;
    width: 100%;
  }

  .M_left_img .backgroundImage, .M_right_img .backgroundImage {   
      position: relative;
      width: 100%;
      height: 250px;
  }

  .M_left_imgC .backgroundImage {
      background-position: 90% 50%;
  }  
  
  .M_right_imgC .backgroundImage {
      background-position: 10% 50%;
  } 

}