Question

是否有可能在HTML中有两个背景图像，当您向下滚动页面时它们会混合在一起？

基本上我有2个相同的图像，但有一个是在白天拍摄的，另一个是在夜间拍摄的，我希望它在光源是原始图像的情况下，当页面向下滚动时，它开始融入较暗的图像？

非常感谢提前。

约旦。

Answer 1

它可能不是那么直截了当但可能会做到这一点。

使用2个具有绝对定位的div，给它们一个负的z-index和100％的宽度和高度。这将成为网站的背景。如果你想让它从白天变为夜晚，则使用夜间背景的div的z-index数字低于具有日期背景的div的数字。通过这种方式，'day'div位于'night'div的顶部，它完全覆盖了它。

现在，当您向下滚动时，使用javascript逻辑检查是否已滚动了一定数量的像素，您可以将“day”div的不透明度降低，例如，每100像素左右减少0.1。

这样，当用户向下滚动1000个像素时，'day'div将完全消失。

Answer 2

也许最简单的解决方案就是提前在图像编辑软件中执行此操作。将两个图像混合成一个高图像，并将其用作背景图像。这将是一个巨大的图像，但仍然没有像加载两个单独的巨大图像那么大。

Answer 3

使用绝对定位将日图像置于夜间图像上方。否则请使用position:fixed，如果您希望其他内容在背景中滚动，因为背景会从白天变为夜晚。

<强>的JavaScript

var start = 500 // how far the user has to scroll down before it start fading
var end = 1200 // the number of pixels the user has to scroll down before the opacity is 0.

$(document).scroll(function(){
    if(scrollTop>start){
        $('.imageDay').css({'opacity':(end-scrollTop)/(end-start)});
    }
});

我假设你可以解决html和css。

Answer 4

请参阅此页面：link您可以像以下一样使用jquery：

/**
 * Parallax Scrolling Tutorial
 * For NetTuts+
 *  
 * Author: Mohiuddin Parekh
 *  http://www.mohi.me
 *  @mohiuddinparekh   
 */


$(document).ready(function(){
    // Cache the Window object
    $window = $(window);

   $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object

      $(window).scroll(function() {

        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
        var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });

}); // window scroll Ends

 });    

}); 
/* 
 * Create HTML5 elements for IE's sake
 */

document.createElement("article");
document.createElement("section");

在HTML / CSS中混合两个背景图像

4 个答案: