使图像透明并填充相对于百分比值的颜色

Question

我在codepen上找到了以下内容，并且非常喜欢此效果。现在我试图根据自己的需要调整它，并遇到一些问题：

每当用户向下滚动或正在调整其屏幕大小时，该图像的表现都很奇怪（我无法用我自己的话来描述它，请参阅我的意思是jsfiddle）。 我想这个问题可能与'background-attachment：fixed'属性有关。

请参见：

.image { 
    width:100%; 
    height:100%; 
    position:absolute; 
    bottom:0; 
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat; 
    background-clip:content-box; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
} 
.show { 
    width:100%; 
    height:100%; 
    position:absolute; 
    bottom:0; 
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat; 
    background-clip:content-box; 
} 

我试图与这两个实验，div和背景附件属性的位置，但我没有得到一个体面的结果。你可以看到我的更新的小提琴（Rev：2-4）。

你们其中一个人有我如何能够使用这种效果没有显示奇怪的行为的想法吗？ 也许有一些jQuery魔术可以帮助我实现这种效果？ 如果解决方案也支持IE 8，那将是最好的，但这不是必须的，因为我只想了解我做错了什么。

在此先感谢。

Answer 1

问题是作者使用了固定的后台附件，没有它的脚本更复杂。 如果我理解正确，你想通过点击按钮来控制位置。

我创建了一个片段，它会给你一个很好的起点：JSnippet

正如你所看到的东西更复杂的存在，但它并没有使用固定的背景，并允许您轻松更新“加载”到任何点你想要的，我没有测试过它，但它应该在大多数浏览器上工作，甚至更旧一次。

您可以设定所有你需要使用属性：

• data-loader-size - >设置大小。
• data-back-image - >设置背部图像。
• data-front-image - >设置正面图像。
• data-update-to - >为控件设置你想要的百分比。

的CSS：

div.loader { 
    position:relative; 
    background-repeat:no-repeat; 
    background-attachment: scroll; 
    background-clip:content-box; 
    background-position:0 0; 
    margin:0; 
    padding:0; 
} 
div.loader .loaded { 
    position:absolute; 
    top:0; 
    left:0; 
    background-repeat:no-repeat; 
    background-attachment: scroll; 
    background-clip:content-box; 
    background-position:0 0; 
    margin:0; 
    padding:0; 
} 
div.loader .position { 
    position:absolute; 
    left:0; 
    border-top:1px dashed black; 
    width: 100%; 
    text-align:center; 
    margin:0; 
    padding:0; 
    min-height: 40px; 
} 
div.loader .position div { 
    font-family: 'Concert One'; 
    background:#2f574b; 
    width: 25%; 
    margin:0; 
    padding:5px; 
    margin: 0 auto; 
    text-align:center; 
    border-radius: 0 0 4px 4px; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    color:white; 
} 

的HTML：

<div class="loader" 
    data-loader-size="450px 330px" 
    data-back-image="http://fdfranklin.com/usf-bull-bw.png" 
    data-front-image="http://fdfranklin.com/usf-bull.png" 
> 
    <div class="loaded"></div>  
    <div class="position"><div>0%</div></div> 
</div> 
<br><br> 
<div> 
    <button class="set-loader" data-update-to="0">Set 0%</button> 
    <button class="set-loader" data-update-to="25">Set 25%</button> 
    <button class="set-loader" data-update-to="50">Set 50%</button> 
    <button class="set-loader" data-update-to="100">Set 100%</button> 
</div> 

jQuery的：

$(function() { 

var loader_class = ".loader", 
    control_class= ".set-loader"; 

var oLoader = { 
    interval  : 10, 
    timer  : null, 
    upPerc  : 0, 
    upHeight  : 0, 
    curHeight : 0, 
    step   : 1, 
    diff_bg  : 0, 
    diff_top  : 0, 
    size   : $(loader_class).data("loader-size").split(" "), 
    heightInt : 0, 
    bimage  : $(loader_class).data("back-image"), 
    fimage  : $(loader_class).data("front-image"), 
    loader  : $(loader_class).children('.loaded').eq(0), 
    position  : $(loader_class).children('.position').eq(0), 
    pos_height : 0 
}; 
oLoader.heightInt = parseInt(oLoader.size[1],10); 
oLoader.pos_height = parseInt($(oLoader.position).height(),10); 

$(loader_class).css({ 
    width: oLoader.size[0], 
    height: oLoader.size[1], 
    'background-image':'url(' + oLoader.fimage + ')', 
    'background-size':oLoader.size.join(' ') 
}); 
$(oLoader.loader).css({ 
    width: oLoader.size[0], 
    height: oLoader.size[1], 
    'background-image':'url(' + oLoader.bimage + ')', 
    'background-size':oLoader.size.join(' ') 
}); 
$(oLoader.position).css({ 
    bottom: 0 - oLoader.pos_height 
}); 
$(control_class).each(function(){ 
    $(this).click(function(){ 
     clearInterval(oLoader.timer); 
     oLoader.upPerc = parseInt($(this).data('update-to')); 
     oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt); 
     oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight); 
     oLoader.curHeight = parseInt($(oLoader.loader).height(),10); 
     oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);    
     oLoader.diff_bg = (oLoader.step === 1? 
      (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight: 
      oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight)); 
     oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10); 
     oLoader.timer = setInterval(function() { 
      if (oLoader.diff_bg) { 
       oLoader.diff_bg--; 
       oLoader.curHeight += oLoader.step; 
       oLoader.diff_top += -oLoader.step; 
       oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height)/oLoader.heightInt * 100); 
       oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc); 
       oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc); 
       $(oLoader.loader).css({ height: oLoader.curHeight }); 
       $(oLoader.position).css({ bottom: oLoader.diff_top }); 
       $(oLoader.position).children('div').text(oLoader.calc_perc + "%"); 
      } else { 
       clearInterval(oLoader.timer); 
       $(oLoader.position).children('div').text(oLoader.upPerc + "%"); 
      } 
     }, oLoader.interval); 
    }); 
}); 

});