首页 > > 网页制作 > css >

博客皮肤的设计

2018-06-24 01:11:51来源：未知阅读 ()

第一次写博客，有点小激动。由于我的兴趣方向是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);
}