Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
575 views
in Technique[技术] by (71.8m points)

css - CSS3 / HTML 5 / PNG blur content behind element

I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.

I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.

Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.

Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

With a little HTML5 and JavaScript magic, the answer is yes:

http://jsfiddle.net/nallenscott/WtQjY/41/

Straw man:

<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            <!-- content-->

        </article>
    </section>
</body>

You'll need jQuery, Stackblur, and html2canvas.

  1. Duplicate the content area and convert it to canvas.

  2. Move the canvas to the header.

  3. Sync the scroll of the content with the canvas in the header.

    html2canvas creates the canvas, Stackblur creates a gaussian blur on the canvas, and the header element is layered over the .blurheader div to simulate translucency.

If you're comfortable with JavaScript, then this might be worth investigating further. It supports the latest versions of IE, Chrome, Safari, and Firefox and permits graceful fallback options for legacy browsers.

Cheers.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...