Question

我有一个'这可能在画布上'问题。假设我在页面上有一个固定的div元素，它的背景颜色设置为不透明。现在，当另一个元素（图像）向后滚动时，可以通过顶部的固定div看到它。

现在，我想这样做，除了后面的全彩色图像将去饱和（即变成不透明，灰度）顶部div覆盖它。我找不到任何可以用CSS3完成的方法，也不可能用直接的javascript来操作像素。

所以我想我想知道canvas元素是否可以检测标准的重叠DOM元素并在表面上重绘它们。或者还有其他方法可以解决这个问题吗？我不想让整个页面成为画布（对于非html5浏览器），而flash不是一个选项。

非常感谢您的想法。

Answer 1

这对我很有意思，所以我实施了一个解决方案。

请参阅： http://jsfiddle.net/3eHmD/show/（edit）

它适用于“所有浏览器”。
它使用jQuery。
它使用预渲染图像：
它不必使用预渲染图像。为避免预渲染，我使用Pixastic's去饱和度（http://www.pixastic.com/lib/docs/actions/desaturate/）。

JavaScript： （可以改进）

var $fixed = $('.fixed');
var $source = $('.content');

var $fixedCopy = $('<div class="fixedDimensions"></div>').appendTo('body').css('zIndex', 99);
var $contentCopy = $source.clone().appendTo($fixedCopy);


$contentCopy.find(':not(.magic)').css('visibility', 'hidden');
$contentCopy.find('.magic').each(function() {
    $(this).css('backgroundPosition', $(this).width() + 'px 0');
});

$(window).scroll(function(e) {
    $contentCopy.css('margin-top',-$(window).scrollTop());
}).scroll();

<强> CSS：

html, body {
    margin: 0;
    padding: 0
}
body {
    background: #eee
}

.content {
    width: 300px;
    margin: 0 auto
}
#fixed {
    background: url(http://i.stack.imgur.com/GKWv7.png);
    color: red;
    font: 36px sans-serif;
    text-align: center
}
.fixedDimensions {
    height: 200px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 100;
}

<强> HTML：

<div id="fixed" class="fixedDimensions">Hello</div>

<div id="container">
    <div class="content">
        <p><div class="magic" style="width:200px;height:300px;background:url(http://i.stack.imgur.com/b3LRY.jpg)"></div></p>
        <p>Lorem ipsum dolor...</p>
        <p><div class="magic" style="width:225px;height:300px;background:url(http://i.stack.imgur.com/6D8gh.jpg)"></div></p>
        <p>Aenean et diam dui..</p>
        ..
    </div>
</div>

Answer 2

其他人提供的解决方案可能会或可能不会更好地满足您的需求。为了完整起见，回答你的问题“这是否可能在画布上？”

是的，可以使用画布进行去饱和。方法如下：

var imageData = ctx.getImageData(0,0,can.width, can.height);
var pixels = imageData.data;
var numPixels = pixels.length;

ctx.clearRect(0, 0, can.width, can.height);

for (var i = 0; i < numPixels; i++) {
    var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
    // set red green and blue pixels to the average value
    pixels[i*4] = average;
    pixels[i*4+1] = average;
    pixels[i*4+2] = average;
}
ctx.putImageData(imageData, 0, 0);

平均三种现有颜色的颜色以获得颜色的平均亮度。然后将所有三种颜色设置为相同的值，以获得平均亮度的灰色。有意义吗？

示例：

http://jsfiddle.net/DZmyB/4/

Answer 3

如果您愿意使用jQuery，可能需要查看jQuery Desaturate plugin。我意识到它没有做你想要的任何事情（它只是让图像饱和或去饱和），但它可以让你在那里找到一些方法。

在元素后面滚动时去饱和图像

3 个答案: