三行CSS代码把网页像素化

作者：程序员成长指北

原文：mp.weixin.qq.com/s/O9rKeH2RV...

最近在浏览网页时，Element-plus 官网那极具 "fashion" 感的页面效果深深吸引了我。录制了一个效果，大家可以感受一下。

顶部导航栏区域在页面滚动时，经过该区域的内容瞬间变成 "像素画" 的神奇效果，简直让人眼前一亮。

创意和视觉效果的实现往往能带来意想不到的惊喜，有些效果很惊艳但是实现原理往往可能朴实无华！

好奇心驱使下，我深入研究，并用 CSS 成功复刻了这一效果，下面就为大家详细剖析其中的奥秘。先看一下实现的效果：

通过下面这段代码，我们可以实现像素画效果与正常显示效果的切换，还能对像素画的渐变、大小、模糊程度进行调整：

xml 复制代码

<template>
 <div class="wrap">
<!-- 控制像素化效果开关 -->
<el-switch
      v-model="isPixel"
      active-text="像素化"
      inactive-text="正常"
  ></el-switch>

<!-- 控制项统一结构，便于维护 -->
<div class="control">
    <label class="label">渐变：</label>
    <el-slider v-model="gradient" :max="10" :disabled="!isPixel" />
</div>
<div class="control">
    <label class="label">大小：</label>
    <el-slider v-model="size" :max="10" :disabled="!isPixel" />
</div>
<div class="control">
    <label class="label">模糊：</label>
    <el-slider v-model="drop" :max="10" :disabled="!isPixel" />
</div>

<!-- 图片区域 -->
<div class="content">
    <div class="pixel" :style="pixelStyle"></div>
    <img class="image" src="../../assets/image/1750313558402.jpg" alt="像素图" />
</div>
</div>
</template>

<script>
export default {
name: 'PixelStyle',
  data() {
    return {
      isPixel: false,  // 是否启用像素化
      gradient: 1,     // 渐变范围
      size: 4,         // 像素块大小
      drop: 4          // 模糊强度
    };
  },
computed: {
    pixelStyle() {
      // 只在启用像素化时应用样式
      returnthis.isPixel
        ? {
            backgroundImage: `radial-gradient(transparent ${this.gradient}px, #fff ${this.gradient}px)`,
            backgroundSize: `${this.size}px ${this.size}px`,
            backdropFilter: `blur(${this.drop}px)`,
            backgroundRepeat: 'repeat'
          }
        : {};
    }
  }
};
</script>

<style scoped>
.wrap {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
color: #333;
margin-top: 20px;
}

/* 控制行结构统一处理 */
.control {
margin-top: 10px;
}

.label {
width: 80px;
font-size: 14px;
color: #555;
}

/* 内容区域 */
.content {
position: relative;
width: 100%;
margin-top: 20px;
padding: 30px;
overflow: hidden;
}

.pixel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
pointer-events: none;
}

/* 图片样式独立控制 */
.image {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
</style>

原理分析

这个像素化效果的关键是：用一层带有模糊和网格背景的遮罩，覆盖在图片上方。

遮罩通过 backdrop-filter: blur() 让图片变得模糊，再用 radial-gradient 制作出一格格"透明+白色"的小圆点背景，配合 background-size 控制它们的密度。

最终，人眼看到的是：部分图片清晰，部分被白色圆点+模糊叠加，就像一个"低分辨率"的像素画效果。