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

Question

我在codepen上发现了下面的内容，并且非常喜欢这个效果。现在，我试图使它适应我的需要，并遇到了一些问题：

每当用户向下滚动或调整屏幕大小时，图像就会表现得很奇怪(我无法用我自己的话来描述它，请参见jsfiddle的意思)。我想这个问题可能与“背景-附件:固定”属性有关。

请参见：

.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的魔法，我可以用它来达到这个效果？最好的解决方案也支持IE8，但这不是必须的，因为我只想了解我做错了什么。

提前谢谢。

Answer 1

问题是作者使用固定的背景附件，没有它脚本就更复杂。如果我做得对，你想通过点击按钮来控制位置。

我创建了一个片段，它将为您提供一个很好的起点：JSnippet

正如您可以看到的，事情是更复杂的，但它没有使用固定的背景，并允许您轻松地更新“加载”到任何点，我还没有测试，但它应该工作在大多数浏览器，甚至更老一次。

您可以使用属性设置所有需要的内容：

• data-loader-size ->设置大小。
• data-back-image ->设置后图像。
• data-front-image ->设置正面图像。
• 控件的data-update-to ->设置所需百分比。

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

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

});