**CSS** 深度图：用 `filter` 模拟景深，模糊背景突出焦点

CSS深度图：给你的网页照片也来个“浅景深”

想象一下，你拿着手机对着你心爱的多肉植物咔嚓一张，照片里背景虚化得恰到好处，完美衬托出多肉那毛茸茸的可爱叶片。这就是摄影里常说的“浅景深”，能让画面更有层次感，突出主体。

那么问题来了，网页上的图片怎么实现这种效果呢？难道要PS一张张修？No No No，作为一名优秀的“前端艺术家”（自封的），我们怎么能这么没有效率呢？今天我们就来聊聊如何用CSS的filter属性，模拟出类似景深的效果，让你的网页也瞬间高大上起来。

“伪景深”的原理：模糊与焦点

要理解CSS如何实现“伪景深”，首先要搞清楚景深的原理。简单来说，景深就是照片中清晰的部分的范围。浅景深意味着清晰范围很小，只有焦点附近的物体是清晰的，而背景和前景都会模糊。

CSS的filter属性里有个好东西叫做blur()，顾名思义，就是模糊。我们可以通过控制不同区域的模糊程度，来模拟景深效果。核心思路就是：让焦点区域保持清晰，而离焦点越远的地方越模糊。

代码实现：从简单到复杂

让我们从最简单的例子开始，一步步解锁“伪景深”的奥秘。

1. 最简单的模糊：全局模糊

.image-container {
  width: 500px;
  height: 300px;
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持比例 */
  filter: blur(5px); /* 全局模糊5像素 */
}

这段代码给图片添加了一个全局的模糊效果。虽然看起来像是模糊了，但离“景深”还差十万八千里。因为整个图片都被模糊了，没有焦点，就像近视没戴眼镜一样。

2. 线性渐变模糊：模拟简单的景深

为了模拟景深，我们需要让模糊程度有所变化。filter属性支持叠加多个滤镜效果，我们可以利用线性渐变来控制模糊程度。

.image-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative; /* 相对定位，方便后续绝对定位 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen; /* 混合模式，让渐变影响模糊效果 */
}

这段代码的关键在于::before伪元素和mix-blend-mode属性。

::before伪元素：我们在图片上方覆盖了一个线性渐变，从透明到白色再到透明。
mix-blend-mode: screen;：这个属性让渐变和图片进行混合。白色区域会降低模糊程度，而透明区域则保持模糊。

这样就形成了一个简单的景深效果，中间区域相对清晰，上下两端逐渐模糊。虽然效果比较生硬，但至少迈出了第一步。

3. 进阶：利用遮罩控制模糊区域

线性渐变只能实现简单的模糊效果，如果想要更精细地控制模糊区域，我们可以使用遮罩（mask）来实现。

.image-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
  mask: url("mask.png"); /* 使用遮罩图片 */
  mask-size: cover;
}

这段代码中，我们使用了一个名为mask.png的遮罩图片。遮罩图片的白色区域表示完全显示，黑色区域表示完全隐藏，灰色区域表示部分显示。通过调整遮罩图片的形状和灰度值，我们可以精确地控制模糊区域。

例如，我们可以创建一个圆形遮罩，中心白色，边缘黑色，这样就可以模拟出一个圆形焦点的景深效果。

4. 高级技巧：CSS变量与JavaScript联动

仅仅使用CSS，我们只能实现静态的景深效果。如果想要实现动态的景深效果，比如让焦点随着鼠标移动而改变，就需要借助JavaScript和CSS变量了。

<div class="image-container" id="imageContainer">
  <img src="image.jpg" alt="Image">
</div>

.image-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
  --focus-x: 50%; /* 初始焦点位置 */
  --focus-y: 50%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
  mask: radial-gradient(circle at var(--focus-x) var(--focus-y), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
  mask-size: cover;
}

const imageContainer = document.getElementById('imageContainer');

imageContainer.addEventListener('mousemove', (event) => {
  const x = event.clientX - imageContainer.offsetLeft;
  const y = event.clientY - imageContainer.offsetTop;

  imageContainer.style.setProperty('--focus-x', `${x}px`);
  imageContainer.style.setProperty('--focus-y', `${y}px`);
});

这段代码实现了鼠标移动控制焦点的动态景深效果。

CSS变量：我们定义了--focus-x和--focus-y两个CSS变量，用于控制径向渐变的中心位置。
JavaScript：我们监听鼠标移动事件，获取鼠标在容器中的坐标，并更新CSS变量的值。

这样，当鼠标移动时，径向渐变的中心位置会随之改变，从而实现动态的景深效果。

注意事项与优化建议

性能问题： blur()滤镜会消耗一定的性能，特别是当模糊半径较大时。因此，要适度使用模糊效果，避免过度模糊导致页面卡顿。
遮罩图片的选择： 遮罩图片的分辨率要足够高，否则会出现锯齿状边缘。
混合模式的尝试： mix-blend-mode属性有很多不同的值，可以尝试不同的混合模式，找到最适合你的效果。
可访问性： 不要过度依赖视觉效果，要确保网页内容对所有用户都是可访问的。

总结：用CSS创造视觉魔法

通过filter属性，我们可以轻松地为网页图片添加“伪景深”效果，让画面更有层次感和艺术感。虽然CSS模拟的景深效果不如真实的景深那么自然，但它在网页设计中仍然是一个非常有用的技巧。

掌握了这些技巧，你就可以在网页上创造出各种各样的视觉魔法，让你的作品更加吸引人。记住，代码只是工具，创意才是关键。祝你玩得开心！

CSS 深度图：用 `filter` 模拟景深，模糊背景突出焦点

CSS深度图：给你的网页照片也来个“浅景深”

发表回复取消回复

CSS深度图：给你的网页照片也来个“浅景深”

发表回复 取消回复

发表回复取消回复