CSS3----wool glass effect

Attached to achieve, if I cut the not obvious, I can explain:

The middle is to get the cover of a book, and then the background is tiled with the acquired cover and blurred, with a layer of transparency 0.65.

Listening is not very simple, there are still many problems to achieve.

HTML Structure Code:

The average person's implementation is a DIV storage content (pointer, turntable, title, audio operation area, etc.), then width 100%, height 100%, and then another div to store the background, of course, do not want to write more div, can be implemented with pseudo-class, I use:: Before, CSS styles are as follows: Background blur------Filter:blur (fuzzy values)

Question 1: The content on the page will also be blurred, the navigation bar and the book chapter name are not visible.

So how to solve the problem 1, it is obvious that the hierarchy problem, the resolution, the parent element is set to 1, the pseudo-class hierarchy to 2 (note that the pseudo-class hierarchy must be less than 0, so as to be placed behind the background)

After adding a hierarchy, the page is like this, and the navigation bar and book chapter names are displayed.

However, the above code is too bright or the PSD we expect is not the same, add a mask on it, here I use pseudo-class:: After written

And look at the overall effect.

Well, the effect is not perfect, looking at is very perfect, but the evil of the Huawei mobile phone comes with a browser, the background does not have a vague effect, then my heart is dashed, because all Huawei comes with no blur effect, and I should add the compatibility prefix has been added, how will not effect it, fortunately, Fortunately there are stackblur.js, in order not to waste I wrote before the CSS code, I alone to the Huawei Browser is using Stackblurimage () This method to achieve, the following I will give you a rough introduction of this method, I also through the strong Baidu learning.

1 first front end want to use stackblur.js, to use Stckblur.js class library, this side attached: http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js

2API description

This library provides 3 functions:

Stackblurimage (sourceImageId, Targetcanvasid, radius, bluralphachannel); Use to blur a picture to a canvas

Stackblurcanvasrgba (Targetcanvasid, top_x, top_y, width, height, radius); Used to perform RGBA blur on a canvas rectangular area

Stackblurcanvasrgb (Targetcanvasid, top_x, top_y, width, height, radius); Used to perform RGB blur on the canvas rectangle area, regardless of alpha value

Stackblurimage (sourceImageId, Targetcanvasid, radius, Bluralphachannel)
sourceImageId indicates the ID of the image to blur;
TARGETCANVASID indicates the ID of the canvas element to display the blurred picture;
RADIUS represents the radius size of the blur. However, according to my comparison test, radius seems to match the blur value of the filter filter in CSS instead of 1:1, which is somewhat similar to 2:1. This is where the radius of the 20px is similar to the CSS in the Blur filter value is set to 10px;
Bluralphachannel is a Boolean property that indicates whether the Aplha transparent channel is blurred and true indicates that it is to be blurred.

3 I'm calling the stackblurimage here.

Structure:

, picture cover storage structure

The implementation of the JS code

Then, the refresh under the Huawei own browser, OK, can become blurred.

The above is the implementation of a CSS implementation of the background blur effect and stackblur.js implementation of the example of fuzzy effect, in fact, I use the stackblur.js, you can not use the CSS to write code, directly with the Stackblur to achieve the blur is good, do not have so much trouble to write two sets, but do not write how you know, more real The practice of accumulating is our secret weapon. Also, there is a shortage of places to welcome the point of thanks.

CSS3----wool glass effect