html - 当图像穿过一条线时反转图像的颜色？

Question

这是我目前拥有的一个 jsfiddle 示例。 http://jsfiddle.net/arcgale/z39hf/2/

在这个例子中，我试图在图像进入黑色区域时反转图像的颜色。假设部分的高度可以改变。

html:

    <img id="silhouette" src="http://hunterhaus.com/images/silhouette-black-mirrored.png"/>
    <section id="s1"></section>
    <section id="s2"></section>
    <section id="s3"></section>

CSS:

    section{height:500px; width:100%}
    #s1{background:blue}
    #s2{background:red}
    #s3{background:black}

    #silhouette{height:100px; width:100px; position:fixed; top:50px; left:50px;}

Answer 1

我有一个演示给你...

http://jsfiddle.net/z39hf/7/

这是一个非常“hacky”的问题，但也许您可以从中获得一些见解？使用一个简单的 js 滚动脚本，一些 css(溢出隐藏和 z-index)技巧，您可以获得您正在寻找的效果。

您也可以通过视差插件和 overflow hidden 来实现此目的。

js:

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
        $(".sticky").css({
            'top': scrollYpos,
        });

});

html:

<section id="s1">
<img id="silhouette1" class="sticky" src="http://hunterhaus.com/images/silhouette-black-mirrored.png"/>

</section><img id="silhouette2" class="sticky" src="http://hunterhaus.com/images/silhouette-white-mirrored.png"/>

<section id="s2">


</section>
<section id="s3">
</section>

CSS

body { margin:0;}
section{height:500px; width:100%;  overflow: hidden; position: relative;  }
#s1{background:blue; z-index:3;}
#s2{background:red;  }
#s3{background:black; z-index:4;}

#silhouette1{height:100px; width:100px; background:none;  }
#silhouette2{height:100px; width:100px; background:none;  z-index: 1;   }

.sticky { position: absolute;  display:block; }