博客皮膚的設計

第一次寫博客，有點小激動。由於我的興趣方向是web前端，所以就給自己設計了個頁面。

這個頁面的主要特點就是磨砂效果，還有背景固定效果。靜止不動首先想到的就是position: fixed，只要將背景圖填滿全屏，再設置固定定位就可以了。不過要註意不能把#home當做固定背景，否則子元素也會固定，滾動條也不會出現。所以我在頁首加了一個div，與#home同級，作為整個背景。

磨砂層在#home中，filter: blur(10px)為模糊效果，這個效果會把容器內的所有內容都模糊，所以這個效果要加在#home::before中，再適當的調整before的背景，使之融入整個背景中，然後再調整模糊程度，再加上邊框陰影，背景亮度使之看起來有毛玻璃的感覺。把z-index值設低一點，不然字會看不到。代碼如下

#home{
width:60%;
margin-left:250px;
height:auto;
position:absolute;
z-index:4;
background:hsla(0,0%,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);
}

　至於其他佈局問題我就不說了