Question

这是我目前所拥有的一个例子。 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

您想要使用CSS图像过滤器：http://www.html5rocks.com/en/tutorials/filters/understanding-css/

我相信webkit目前支持它：

img {-webkit-filter: invert(100%);}

Answer 2

我有一个演示给你......

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

这是一个非常'hacky'，但也许你可以从中获得一些见解？使用简单的js滚动脚本，一些css（溢出隐藏和z-index）手法，你可以获得你正在寻找的效果。

您也可以使用视差插件和溢出隐藏来实现此目的。

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

在图像穿过线条时反转图像的颜色？

2 个答案: