如何使用CSS实现图片变暗及图片、背景模糊效果

一、图片调暗效果 #

两种通用实现方案可按需选择：

• 方案1：使用filter属性的brightness()函数，参数取值范围0-1，值越小图片越暗
  代码示例：

  .darken-img {
    /* 调整为原亮度的50% */
    filter: brightness(0.5);
  }
  

• 方案2：外层套容器叠加半透明遮罩，适合需要自定义遮罩色值、叠加渐变等复杂场景
  代码示例：

  <div class="img-wrapper">
    <img src="your-image-path.jpg" alt="示例图片">
  </div>
  

  .img-wrapper {
    position: relative;
    display: inline-block;
  }
  .img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5); /* 最后一位参数为透明度，越大遮罩越暗 */
    pointer-events: none; /* 避免遮罩遮挡图片的点击、hover等交互 */
  }
  

二、图片模糊效果 #

使用filter属性的blur()函数实现，参数为模糊半径，单位支持px、em等，值越大模糊程度越高
代码示例：

.blur-img {
  /* 模糊半径为4px */
  filter: blur(4px);
}

注意：如果需要同时实现调暗+模糊效果，直接将两个filter参数用空格拼接即可：filter: brightness(0.5) blur(4px);

三、背景模糊效果 #

分两类常见场景实现：

1. 容器的背景图片单独模糊 #

不要直接给容器加blur属性，会导致容器内的文字、子元素全部跟着模糊，正确方案是用伪元素单独承载背景做模糊处理：
代码示例：

.bg-blur-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.bg-blur-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('your-background-image.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.1); /* 放大消除模糊后边缘的透明留白 */
  z-index: -1;
}

2. 毛玻璃效果（仅模糊元素下方的背景内容） #

使用backdrop-filter属性实现，只会作用于元素下方的内容，不会影响元素本身的文字、边框等样式：
代码示例：

.glass-card {
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px); /* 模糊下方背景8px */
  border: 1px solid rgba(255,255,255,0.2);
}

内容的提问来源于stack exchange，提问作者Ducker Hasuko