使圖像透明並填充相對於百分比值的顏色

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); 
    }); 
}); 

});