有时候点开一个活动页，第一眼就觉得不对劲：图不是加载失败那种糊，是故意糊，而且带着一格一格的颗粒感。这个东西你要是上滤镜、写canvas、再搞截图重绘，路子就走偏了。想把网页做成“像素风”，CSS往往三行就够，剩下的反而是你怎么控制作用范围。

最短的版本

先看一个最简单的实现：

<div class="pixel-wrap">
  <img src="/banner.jpg" alt="banner" class="pixel-img">
</div>

.pixel-wrap {
  width: 360px;
}

.pixel-img {
  width: 100%;
  image-rendering: pixelated;
  transform: scale(1.08);
}

这里有个坑。只写image-rendering: pixelated;，很多人会发现“没反应”。原因也简单，这个属性不是凭空把图片变马赛克，它只是在缩放时告诉浏览器：别给我做平滑插值，直接按像素块放大。所以关键不在于这个属性本身，而在于你有没有制造缩放。

更完整的写法

我一般会把“缩小采样 + 放大显示”放到一块做：

<div class="hero">
  <img id="cover" src="/demo/cover.png" alt="">
</div>

.hero {
  overflow: hidden;
  width: 420px;
  height: 240px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  transform: scale(1.12);
  transform-origin: center;
}

这时候像素味已经出来了，但还差一点“老游戏机”的颗粒感。只靠CSS，网页文字、按钮、边框这些DOM元素不会自动跟着一起像素化，它主要对位图资源效果更明显。也就是说，最适合下手的是图片、canvas、视频封面，不是整页正文。

整页一起做的方法

要是你非要整页一起做，我一般不会直接给body上样式，那样很容易把交互搞得难看。更稳的方法是套一层容器，切一个实验区：

<div id="app" class="retro-mode">
  <section class="card">
    <h2>订单成功</h2>
    <p>这块故意做成8-bit质感。</p>
    <img src="/static/order-success.png" alt="">
  </section>
</div>

.retro-mode {
  zoom: 0.5;
}

.retro-mode * {
  image-rendering: pixelated;
}

.retro-mode {
  transform: scale(2);
  transform-origin: top left;
}

这里得先泼个冷水：这种写法能做出效果，但副作用也明显。zoom的兼容性和布局行为不算优雅，transform: scale()会影响定位、点击区域、滚动条判断。拿来做活动页、小游戏页、专题页可以，拿来改后台管理系统，八成会把自己坑进去。

用JS控制模式切换

我更建议用JS只做一件事：切模式，不碰业务结构。

const btn = document.querySelector('#switchPixel');
const app = document.querySelector('#app');

btn.addEventListener('click', () => {
  app.classList.toggle('retro-mode');
});

<button id="switchPixel">切换像素风</button>
<div id="app">
  <img src="/img/avatar.png" alt="">
</div>

这种写法有个好处，样式实验和业务逻辑是分开的。视觉想开就开，想关就关，不用把DOM改得乱七八糟。

一个常见坑点

很多人本地测得挺好，线上一发发现高清图还是“只是变大了，没有像素块感”。这通常不是CSS写错，是原图本身分辨率太高。1920宽的图放大1.05倍，你当然看不出块。真正能打出像素风的，往往是先用小尺寸素材，再放大显示。素材尺寸不对，CSS再花也没用。

总结

这题真没那么玄乎。核心就三件事：

1. 使用image-rendering: pixelated;

2. 制造缩放场景

3. 别一上来全站梭哈，先圈一块区域做实验

三行CSS能把网页“像素化”，这话不算吹，但前提得说全：它更像是一种渲染指令，不是图像处理引擎。你把这个边界想明白，后面就不会在filter、blur、backdrop-filter那些地方绕半天。那些东西做出来是糊，不是像素风，差得还挺远。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13745