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

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

基本上我有两张完全相同的图片，但一张是在白天拍摄的，另一张是在晚上拍摄的，我希望它是在亮的图片是原始图片的地方，当页面向下滚动时，它开始融入到暗的图片中

非常感谢

---

乔丹。

这可能并不简单，但可能会奏效

使用2个绝对位置为的div，给它们一个负的z指数和100%的宽度和高度。这将成为网站的背景。如果你想让它从一天转到另一天，那么给具有夜间背景的div的z-指数一个比具有日间背景的div的z-指数低的数字。这样，“白天”部分就位于“夜晚”部分之上，并且完全覆盖了它

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

---

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

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

使用绝对定位将日间图像置于夜间图像之上。否则，如果您希望其他内容在背景从白天逐渐消失到夜晚时在顶部滚动，请使用

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。

请参见本页：您可以将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");

---

我想不是用CSS。JS可能会管理不透明度转换。是的。我认为不透明度是一种方式，不透明度是你的风格，但是你需要JS来监听滚动事件。你可以用css3声明多个背景图像：当然，在这种情况下，任何混合都必须用图像本身来完成（这可能会让你考虑在你的图像编辑软件中有一个你已经混合的图像。）