0 reply content: the so-called frosted glass effect is actually translucent + FUZZY, which can be implemented using CSS filter.
If you don't have much time, you can leave a brick. The subject can find documents and more cases by himself.
Filter-CSS
p { -moz-filter: blur(5px); -webkit-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);}
I recommend this blog tip: Use CSS to convert an image into a blur (frosted glass) effect.
Three methods are introduced.
CSS 3 filters, SVG filters, and Gaussian fuzzy StackBlur using Canvas.
.
Let me fix the problem. The method is @ Meng Shuang paula. The underlying layer is blurred during the pop-up, and the pop-up layer is transparent.
Initial status:
After modal is popped up:
No problem with ios6 +, android 4.4. No problem with ios6 +, android 4.4.
Therefore, Canvas is used to simulate a more general scenario, but I haven't tried it yet. Add a Canvas solution: Use Canvas to draw web page snapshots and perform Gaussian fuzzy processing to implement Blur with Canvas.
Blur the B station (the image does not seem to be painted into the canvas ):
Refer:
- Html2canvas
- Using HTML5/Canvas/Javascript to take screenshots
- StackBlur
I want to know. IE11 IE10, which supports CSS3, does not support this special effect. Ie7-9 is also supported. I have been testing for a long time. Google, Firefox, ie7-9 can be achieved. The implementation effect is good or bad. At least IMG can handle it. Only IE10-11 is two wonderful. Filter: blur, svg reference, filter: progid: DXImageTransform. Microsoft. Blur all have no effect. -Webkit-backdrop-filter: blur (15px );
Background: rgba (255,255,255, 0.4 );
No thanks. Backdrop-filter: blur will blur the upper part. Its usage is similar to filter: xxx! Backdrop-filter only supports IOS9.1 +. Details: Can I use... Support tables for HTML5, CSS3, etc
,
Further explanation: Advanced CSS filters_filter, backdrop-filter, filter () Tutorial _ w3cplus
H5 can be used to achieve the iOS7 style frosted glass effect. But it does not mean you can use this effect at will. Some prerequisites are required.
From the technical point of view, we need to meet the following technical conditions:
1. filter that can blur the image.
2. You need to capture the image information of all contents under the floating layer of the frosted glass. It's like a screenshot.
3. You need to synchronize the motion of images with the scrolling browser. The main difficulty lies in real-time synchronization, especially in processing rolling inertia.
The implementation idea is to "capture screen" the content under the glass Float layer to obtain image resources. Then, blur the image and use it as the background layer of the glass Float layer. Then, you need some js Code to monitor the scrolling of the content, and adjust the position of the background image on the glass layer so that it can be synchronized with the scrolling of the content.
Currently, the browser supports H5. The first one can be implemented through CSS Filter. As described in @ winter. The second one can also be implemented, requiring a magical html2canvas
. Article 3 it is troublesome to handle it by yourself. Cross-browser cross-device support is not difficult.
The overall effect is probably an example given by @ Yao Dong. In terms of browsers, IE 10 +, currently Chrome, Firefox, and Safari can all work out. However, this solution is not practical enough. The main problems are:
1. You must ensure that the content under the floating layer does not contain Gif, Flash, video, and text images that can be played in scrolling mode, as well as anything that can be moved. Because the overhead of Screen capturing is still relatively large. Especially when there are a large number of image resources.
2. Smoothness issues. Chrome, IE, and Firefox are acceptable in desktop browsers. Because Safari is designed to have more power consumption requirements than other browsers, it must be forced to enable GPU acceleration for smoothness. The mobile version must use the latest iPhone 5 s and iPad Air to deliver a smooth performance. Not to mention the poor performance of Android Chrome for the Blur filter.
3. synchronous scrolling. Because different browsers have different processing methods for scrolling. Especially the rolling inertia problem. For example, when the touch event stops, the content continues to rotate in the original direction for a period of time. However, the rolling float layer may not be captured at this time. @ Yao dong's example has this problem.
Finally, I personally think that if you want to make a web app for iOS 7, you don't have to worry about the glass effect. On the one hand, this investment has little impact on user experience. On the other hand, with the launch of iOS 7.1, the effect of iOS applications also fades away the emphasis on translucent blur. Therefore, you do not have to invest too much energy on this. Who knows what new iOS 8 looks like.
========================================================== ======================================
Update 1
Bytes ---------------------------------------------------------------------------------------------------------------
After receiving a comment from @ Meng Shuang paula, I mentioned that screen capture is not required.
First, I am not saying that css filter must act on images. Here I solemnly declare that I have no such intention !!!
I have read the examples provided. It does not use screen capture. However, I think this example may encounter some problems in actual use. I personally do not prefer this approach.
According to the iOS 7 Blurred Header
Source code, the scheme used here is to copy the dom node to the floating layer and then perform blur on the floating layer. It is indeed effective for relatively simple content. However, if the copied dom node contains the elements that are uniquely labeled with the id attribute, and the copied node contains some elements that cannot predict the status of execution with js. Or the css selector of the page style depends on an outer container. The copied content may be different from the original content rendered.
In short, I personally think this solution is less universal.
I just read the CSS Regions solution provided by @ Liu xiaole, and I feel that this is the ultimate solution. Unfortunately, browser support still takes two years. To achieve a glass mask effect similar to iOS7, it is not enough to use css3 filter alone.
CSS RegionsDefine the content stream.
CSS RegionsAllows developers to define the location container, and then specify the actual content elements to flow between one or more location containers, which provides the possibility of a glass mask.
For example, to implement the top and bottom frosted glass masks of iOS7, the specific idea can be as follows:
Define three location containers, corresponding to the top area, the middle area, and the bottom area, and apply filter: blur at the top and bottom. Specify the actual page content elements in turn "inbound" these three locations container.
Compared with screenshot + fuzzy processing
CSS RegionsThe solution is more underlying and efficient. The disadvantage is that it is still in the test phase and the advantage is high efficiency.
CSS RegionsThe experiment is still in progress. Open chrome: // flags/# enable-experimental-web-platform-features in chrome and enable the experiment features.
Currently, it is a solution to simulate content streams using content copy + synchronous scrolling. For more information, see Meng Shuang paula's answer.
For more information about CSS Regions and filter, see Blurry Transparent Header Effect from iOS7 in CSS.
Haha, I wrote a demo: Color Not
A filter has an effect on an image. But if the background is solid or not, can I use a filter?
