博客皮肤的设计

最新推荐文章于 2023-03-20 12:55:00 发布

转载最新推荐文章于 2023-03-20 12:55:00 发布 · 180 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=i2bckjbaa&title=%E5%8D%9A%E5%AE%A2%E7%9A%AE%E8%82%A4%E7%9A%84%E8%AE%BE%E8%AE%A1

前端专栏收录该内容

493 篇文章

订阅专栏

本文分享了如何使用CSS实现网页的磨砂玻璃效果，包括利用filter:blur(10px)创建模糊背景，以及position:fixed实现背景固定。通过调整z-index和背景亮度，营造出独特的视觉体验。

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