CSS新手也能搞定！背景镂空效果教程大揭秘

引言

最近学玩CSS，看到一个超酷的Background镂空效果，心痒痒想学会这招。正好在Element UI文档中找到教程，一下子来了兴趣。现在我就给大家分享下我是怎么学会并搞定这个效果的~希望你们看完也能有收获~

好奇的起源

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 400px;
    background-image: radial-gradient(transparent 50px, #fff 50px);
    background-size: 200px 200px;
    background-color: yellow;
}

Element UI的文档里面有超级炫酷的特效，让局部位置变得像朦胧的磨砂玻璃，页面看起来超赞好时髦。于是我开始想自己能不能搞出这种效果。

背景镂空原理

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 400px;
    background-image: radial-gradient(transparent 50px, #fff 50px);
    background-size: 200px 200px;
    background-color: yellow;
+   background-repeat: no-repeat;
}

首先，用图片做个镂空效果挺好哒。比如把背景图设成黑白相间的，那下面的字就能从白底儿露出来些，像磨砂玻璃似的，聪明又有层次感，是不是觉得炒鸡赞？其实这就是让咱们视觉上更舒服，页面看起来更立体了。

径向渐变背景

咱们来玩儿玩儿背景镂空！中间是透明的，周围一圈白边形成了一种像好多小圆点混成一团的感觉，既简单又好看，不信你试看看？

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 400px;
    background-image: radial-gradient(transparent 50px, #fff 50px);
    background-size: 120px 120px;
    background-color: yellow;
    /* background-repeat: no-repeat; */
}

调整背景尺寸

记住，想要做出镂空背景，就要先把背景大小调整好，这样就能决定每个圆孔间的距离与紧凑程度~经过我的试验，发现71px这个数刚好能画出不错的镂空效果。这可不是随便猜的，试了下挺实用的~

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 400px;
    background-image: radial-gradient(transparent 50px, #fff 50px);
    background-size: 71px 71px;
    background-color: yellow;
    /* background-repeat: no-repeat; */
}

仿Element UI设计

为让网站看起来像Element UI官网上那样，我调大了点比例，换了下颜色，还尽量校准了。但还是觉得怪怪的，特别是那个毛玻璃效果，看着不顺眼。然后我就去瞅瞅人家官方怎么弄的。

学习Element UI

翻了下Element UI的页面，看到他们居然用了个叫backdrop-filter的玩意儿，这货可以让你的背景变得朦胧、半透明，不仅好看，还特别引人注目。我觉得挺好，就赶紧试了下给自己的镂空背景加点这效果。

探索新属性

学background-filter新技能时，先搞懂饱和度（saturation）及模糊度（blur）！加一些saturate就能让颜色更鲜艳，再加点blur就有柔美的磨砂画面了。不信你试试？效果肯定不输于Element UI，页面质感瞬间提升到新档次！

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 400px;
    background-image: radial-gradient(transparent 10px, #fff 10px);
    background-size: 40px 40px;
}
.container {
    padding-top: 400px;
    height: 200vh;
}
.circle {
    width: 100%;
    height: 200px;
    border-radius: 25px;
    background-color: red;
}

探索细节设置

试试看Saturate，跟你说，还能调整比例！调成10%的话画面变得暗暗的，感觉水汪汪的很有质感。做好的网页看上去有意思得不得了，客人肯定乐于多停留一会儿哈。

background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;

总结与展望

我刚刚学会了新的CSS技巧—调整背景透明度。做出了有点磨砂玻璃的效果，真是帅呆了！出于好奇研究这个，虽然有点难但是很有趣。以后还有很多CSS玩法要玩，所以我会继续努力学东西，提高技术水平。

。