如何为非容器内的多个元素实现无缝透明度渐变效果？

有多个独立的.code-line元素（无法放入统一容器），基础样式为：

.code-line {
  background-color: #e9dfba;
}

需要实现最后4-5行连续无缝的透明度降低效果，但直接给每行设置不同opacity值时，会出现明显的水平分界线，需解决该问题。

核心原因 #

直接设置opacity会让整个元素（背景、文字、边框）统一透明，相邻元素的透明背景叠加后，会产生视觉上的生硬边界。要实现无缝过渡，需让元素内部的透明度渐变衔接，而非给整个元素设置固定透明度。

解决方案1：背景色渐变衔接（简单高效） #

不给元素设置整体opacity，而是给最后几个元素设置首尾衔接的背景色透明渐变，让视觉过渡自然：

/* 保留基础样式，可增加内边距优化显示 */
.code-line {
  background-color: #e9dfba;
  padding: 4px 8px;
}

/* 最后5行的渐变背景，首尾值完全衔接 */
.code-line:nth-last-child(5) {
  background: linear-gradient(to bottom, #e9dfba 0%, rgba(233, 223, 186, 0.8) 100%);
}
.code-line:nth-last-child(4) {
  background: linear-gradient(to bottom, rgba(233, 223, 186, 0.8) 0%, rgba(233, 223, 186, 0.6) 100%);
}
.code-line:nth-last-child(3) {
  background: linear-gradient(to bottom, rgba(233, 223, 186, 0.6) 0%, rgba(233, 223, 186, 0.4) 100%);
}
.code-line:nth-last-child(2) {
  background: linear-gradient(to bottom, rgba(233, 223, 186, 0.4) 0%, rgba(233, 223, 186, 0.2) 100%);
}
.code-line:nth-last-child(1) {
  background: linear-gradient(to bottom, rgba(233, 223, 186, 0.2) 0%, rgba(233, 223, 186, 0) 100%);
}

这种方式让相邻元素的渐变起点和终点完全匹配，视觉上形成连续的透明过渡，彻底消除分界线。

解决方案2：CSS遮罩（细腻过渡，支持内容透明） #

如果需要让文字和背景一起平滑透明，可使用CSSmask-image（添加webkit前缀兼容主流浏览器），通过遮罩渐变控制元素可见度：

.code-line {
  background-color: #e9dfba;
  padding: 4px 8px;
}

/* 最后5行的遮罩渐变，首尾衔接 */
.code-line:nth-last-child(5) {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 100%);
}
.code-line:nth-last-child(4) {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
}
.code-line:nth-last-child(3) {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
}
.code-line:nth-last-child(2) {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
}
.code-line:nth-last-child(1) {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
}

遮罩通过黑色渐变的透明度控制元素可见区域，黑色对应完全不透明，透明对应完全隐藏，相邻元素的遮罩衔接后，整体过渡无任何生硬边界。

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