Simulate the blur effect of the navigation bar, and simulate the blur effect of the navigation bar.

Simulate the blur effect of the navigation bar, and simulate the blur effect of the navigation bar.
In my previous project on a video playback website, there was no professional design, and there was only one powerful PS. Therefore, the responsibility for layout and design of pages lies in my front-end apprentice. At that time, I used the box model most skillfully, so I would divide the page into one box, And the nesting between boxes forms the whole page. The first difficulty is to make a navigation bar. If it is just a navigation bar, it is not complicated, but I am not afraid of tigers. I think it is necessary to make a powerful navigation bar, so at a glance, I caught up with my favorite video playing website, "beep. First, its navigation bar is like this: this is the figure captured when I published this article. It has been two or three months since I started that project, we can see how popular Y (^ o ^) Y is in this navigation bar. The following is the navigation bar that I mimic:

To achieve this effect, you need to understand the Implementation ideas: (1) first, there is an image under the navigation bar, which is not on the same layer. You can set the navigation bar to position: absolute. (2) second, the navigation bar needs to be transparent so that you can see the following. An opcity is required or the background-color attribute is set to an alpha value. (3) The navigation bar must have a blur. You can use the filter attribute to set a value for blur. According to this idea, we finally achieved this effect: we can see that there is no vague feeling, no matter how we adjust the value of blur. There was a white background, and a transparency was set on the white background. It can be found that it is not the same thing. After reading the Page code repeatedly, we can find that there is a background image below the navigation bar, the background image is exactly the same as the background image in the navigation bar. So there is an error in thinking: we should not look at the image below, but add a background image to the navigation bar to see its own image, so as to achieve that effect. Add a background-image attribute to the navigation bar and overflow: hidden.