博客肌肤的设计
博客皮肤的设计
第一次写博客，有点小激动。由于我的兴趣方向是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); }
至于其他布局问题我就不说了