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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

562 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:29:30+0000

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.

Duplicate the content area and convert it to canvas.
Move the canvas to the header.
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.

Categories

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags