将图片透明化并填充颜色，相对于百分比值。

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的位置和background-attachment属性进行实验，但是没有得到满意的结果。你可以查看我更新后的fiddles（版本：2-4）。

您中有人有想法如何使用此效果而不出现奇怪的行为吗？也许有一些jQuery魔法可以帮助我实现这个效果？

最好的解决方案也应支持IE 8，但目前并非必须，因为我只想了解我做错了什么。

提前致谢。

- Patte

---

我已经在Chrome、FF和IE11上尝试了你的fiddle，对我来说看起来很好。也就是说，我看不出你所说的“图像行为怪异”的意思。你能再解释一下吗？ - U r s u s

好的，我会尝试解释一下：每当用户调整屏幕大小或向下滚动时，图像都无法正确显示。 我期望的是图像向上滚动。 在我的情况下，它随着用户所看到的内容滚动。我猜这是由于“background-attachment: fixed”属性造成的，但我还没有找到另一个解决方案。将'background-attachment'属性设置为'scroll'将给我所需的滚动行为，但它会删除“填充图像”的效果。 - Patte

抱歉，我还在努力中...您的意思是您希望图像和进度条能够响应不同的屏幕尺寸并进行适应吗？ - U r s u s

我想我找到了问题所在。当我上下滚动时，颜色填充移动了，但是图像本身相对于窗口保持不变。这就是你所指的奇怪行为吗？ - Slartibartfast

我没有看到任何问题。 "填充图像"效果是由于它是固定图像的原因。再次检查您的第一个链接，您会注意到公牛图像从未移动。您的fiddle以完全相同的方式工作。 - Phil

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

});

- Shlomi Hassid

---

太好了！它正在运行。非常感谢你。 :) 对不起，我回复晚了，我在度假。 - Patte