在不同背景上滚动时，使图标从亮到暗变化

Question

图标需要逐个像素地从亮变为暗，所以如果页面滚动一个图标，一半是暗的，一半是白色。

我最初的想法是将两个图标叠加在一起。灯光可以是z-index: 0页面z-index: 1和黑色z-index: 2，但是黑色会一直显示..也许溢出隐藏在页面上？但是这些位置需要固定在窗口的一侧，并且固定并不会出现溢出。

页面的黑色部分是图像，所以不要依赖它是黑色的。

Here's a little fiddle I've made to help.

＆＃13;

＆＃13;

body { width: 350px; background-color: #efefef;}
.icons { position: fixed; top: 10px; left: 10px;}
.icons .icon { color: #fff;}
.content { padding: 0 20px; background-color: #fff;}

＆＃13;

<div class="icons">
    <div class="icon">+</div>
    <div class="icon">+</div>
    <div class="icon">+</div>
</div>
<img src="http://placehold.it/350x150">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reprehenderit sapiente expedita voluptas provident vitae molestias ex doloribus tenetur eos at quia molestiae, aliquam cupiditate accusantium consectetur enim natus laudantium?
</div>

＆＃13;

＆＃13;

＆＃13;