如何实现DIV背景平滑过渡？淡入淡出效果设置方法

当然可以实现两个背景的淡入淡出融合过渡，并且能精准控制过渡效果的像素范围。核心思路是通过渐变遮罩层+元素叠加的方式，让相邻区块的背景在指定区域自然衔接。

具体实现代码 #

CSS 部分

.sectionA {
  height: 200px;
  min-width: 100vw;
  background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
}

/* 给sectionA底部添加过渡遮罩，height控制过渡像素范围 */
.sectionA::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 这里设置过渡区域的高度，比如80px */
  /* 渐变从透明过渡到sectionB背景的起始色调，保证过渡自然 */
  background: linear-gradient(to bottom, transparent 0%, #7b50c8 100%);
}

.sectionB {
  height: 200px;
  min-width: 100vw;
  background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-top: -80px; /* 与遮罩高度一致，让过渡区域叠加 */
  padding-top: 80px; /* 如果区块内有内容，避免被叠加区域遮挡 */
}

HTML 部分

<div class="sectionA"></div>
<div class="sectionB"></div>

关键说明 #

• 控制过渡范围：修改.sectionA::after中的height值，就能直接调整过渡效果的像素范围，数值越大过渡区域越宽，视觉上越平缓。
• 自然衔接技巧：渐变的终点颜色尽量匹配下一个区块背景的起始色调，你可以用取色工具提取背景图边缘的颜色，替换示例中的#7b50c8，让过渡更丝滑。
• 内容兼容性：如果区块内有文本或其他元素，记得给第二个区块添加与遮罩高度一致的padding-top，避免内容被叠加区域遮挡。

内容的提问来源于stack exchange，提问作者Jonathan DEKHTIAR