三行CSS代码把网页像素化（css设置像素）

最近在网上逛，突然发现Element-plus官网的效果非常"fashion"。

顶部导航栏区域在页面滚动的时候，所有经过导航栏区域的内容都会变成像 "像素画" 一样，效果非常有意思。

我用CSS复刻了一下这个效果，后面简单分析一下原理。

<template>
<div class="wrap">
<el-switch v-model="isPixel" active-text="像素" inactive-text="正常">切换</el-switch>
<div style="display: flex;align-items: center">
<div style="width: 80px">渐变：</div><el-slider v-model="gradient" max="10" :disabled="!isPixel" />
</div>
<div style="display: flex;align-items: center">
<div style="width: 80px">大小：</div><el-slider v-model="size" max="10" :disabled="!isPixel" />
</div>
<div style="display: flex;align-items: center">
<div style="width: 80px">模糊：</div><el-slider v-model="drop" max="10" :disabled="!isPixel" />
</div>
<div class="content">
<div class="pixel" :style="pixelStyle"></div>
<el-image style="width: 300px;" src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" lazy />
</div>
</div>
</template>
<script>
export default {
name: 'PixelStyle',
data() {
return {
isPixel: false,
gradient: 1,
size: 4,
drop: 4,
}
},
computed: {
pixelStyle() {
if(this.isPixel) {
return {
backgroundImage: `radial-gradient(transparent ${this.gradient}px, #fff ${this.gradient}px)`,
backgroundSize: `${this.size}px ${this.size}px`,
backdropFilter: `blur(${this.drop}px)`,
}
}else {
return {}
}
}
}
}
</script>
<style scoped>
.wrap {
width: 340px;
margin: 0 auto;
border: 1px solid #ddd;
padding: 20px;
box-sizing: border-box;
}
.content {
width: 300px;
position: relative;
}
.pixel {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
z-index: 99;
}
</style>

原理：

本质上就是先在图片上盖上一层模糊层(backdrop-filter)，然后设置"模糊层"的背景图为一个个径向渐变的颜色块，并且设置一下大小。

这样图片部分被遮挡住，还有部分露出来，在人视觉效果中感觉就像是像素画。