Home > Developer > Web Develop
Frosted glass In fact, can be blurred to see behind the scenery, people feel a kind of hazy beauty, so that the interface looks a bit of a sense of hierarchy.
Like what:
Tall on Ah, next must be envious preface process ...
Of course, using PS to make a panoramic glass background is undoubtedly the most convenient, then there is nothing to do.
Of course no no no.
Frosted Glass is undoubtedly a kind of fuzzy, without filter blur.
Final effect (Chrome):
Weather forecast
Well, it will be.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> </style></Head><Body> <Divclass= ' container '> <Divclass= ' Frosted-glass '></Div> <imgclass= ' Weather 'src= ' Cloudy.png '> </Div></Body></HTML>
Let's start with a div as a container layer to place a landscape background image.
Put a div inside, as the body of the frosted glass.
Put an IMG and display the weather icon.
Container layer:
Size is the size of the picture, the landscape as a background display, no-repeat. Here is a small trick, set the background-attachment to fixed, do not scroll with the elements, so that the child element inherits the background of this layer, the child element becomes a viewport, where to move to see where the background ... The amount ... This sentence is a bit difficult to understand, the lack of language in the yard is also a great distress ...
. container{ width:287px; height:285px; Background-image:url (background.png); Background-repeat:no-repeat; background-attachment:fixed; Overflow:hidden; }Frosted glass Layer:
The key technique here is Background:inherit, which uses the background of the parent element directly, and the parent's background-attachment:fixed can do all kinds of cool effects from the camera to see the world.
The glass in this article is a panorama, of course, can be in the upper half or the lower half, or other position, this will see inherit and fixed a good place.
. frosted-glass{ width:287px; height:285px; Background:inherit; -webkit-filter:blur (5px); -moz-filter:blur (5px); -ms-filter:blur (5px); -o-filter:blur (5px); Filter:blur (5px); Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=4, Makeshadow=false); }Above the various filter in order to be compatible with a variety of browser version, can degree Niang Google, casually.
Ie6~9 is compatible with Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=4, Makeshadow=false).
IE8 under the effect, continue to do it.
The last is the weather icon:
Need to put the icon floating in the top of a position, the individual is not very fond of flying in the sky of the absolute to solve the earthly problems, the positioning of elements within the margin to do is sufficient, although the page will have an impact on the reflow, but will not produce sufficient impact, The advantage is that the parent element's position and the size of the change will be as small as possible, let the absolute to get, then the head big, the human problem let the world to solve it.
The icon's position is set to relative so that it floats on top, because relative is higher than the default static display level.
Positioning is done with margin, of course, the premise is to make it into a block-level element, otherwise it will be eggs.
. weather{ width:80px; height:80px; Margin-top: -200px; margin-left:100px; position:relative; Display:block; }This completes the basic effect.
CSS frosted glass effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
