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

Question

是否可以在html中有两个背景图像在您向下滚动时融合在一起？

？

基本上我有2个相同的图像，但一个是在白天拍摄的，另一个是在晚上拍摄的，我想要它是原始图像，并且随着页面的滚动，它的滚动开始融合到黑暗的一个图像？

非常感谢。

乔丹。

Answer 1

它可能不是完全直接，但可能会做到。

使用2个Divs具有绝对定位的DIV，使它们具有负z指数，宽度和高度为100％。这将成为网站的背景。如果您希望它一天到晚上都可以将DIV的Z Index带有夜间背景的数字低于DIV的Z Index。这样，" day'div在"夜"div之上，它充分覆盖了它。

现在向下滚动时，请使用JavaScript逻辑检查是否已滚动了一定数量的像素，您可以每100像素左右降低" Day" Div的不透明度。

这样，当用户向下滚动1000像素时，"日"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

请参阅此页面：链接您可以将JavaScript与这样的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");