Blog Skin Design and blog Skin Design

Blog Skin Design and blog Skin Design

I was a little excited when I wrote my blog for the first time. My interest is in the web Front-end, so I designed a page for myself.

The main feature of this page is the matte effect and background fixation Effect. The first thing that comes to mind when the image remains unchanged is position: fixed. You only need to fill the background image in full screen mode, and then set a fixed position. Note that # home cannot be regarded as a fixed background. Otherwise, the sub-element will be fixed and the scroll bar will not appear. So I added a div at the top, which is the same as # home, as the whole background.

In the # home, the filter: blur (10px) is the blur effect, which will blur all the content in the container, so this effect must be added to # home :: in before, adjust the before background to be integrated into the entire background, then adjust the Blur level, and add the border shadow to make the Background Brightness look like a frosted glass. Set the z-index value to a lower value, otherwise the word will not be visible. The Code is as follows:

# Home {width: 60%; margin-left: 250px; height: auto; position: absolute; z-index: 4; background: hsla (100%, 0.6 ); box-shadow: 0 0 10px 2px #000000 ;}# home: before {content: ''; position: absolute; width: 100%; height: 100%; background: url (http://images.cnblogs.com/cnblogs_com/Noesis/985180/o_01.jpg); background-size: 120%; background-attachment: fixed; z-index:-1;-webkit-filter: blur (10px); filter: blur (10px );}

 

I will not talk about other layout issues.