如何用CSS实现左上角标题栏右侧边缘的渐变透明效果？

问题描述 #

我在图片左上角放置了一个标题栏（.channel-info-sash），为确保文字在任意上传图片上都清晰可见，使用了从黑色到透明白色的背景渐变搭配白色文字。但目前该标题栏的右侧边缘生硬突兀，在白色背景图片上尤为明显。我希望右侧边缘能实现类似上下方向的渐变透明效果，尝试过box-shadow和将渐变旋转至135deg，但都会导致底部边缘出现明显问题。请问仅通过CSS能否实现这一效果？

可复现代码 #

HTML

<div class="container">
  <div class="header">
    <span class="channel-info-sash">Today at 16:40, repeats monthly</span>
  </div>
</div>

CSS

.container {
  width: 750%;
  padding: 2rem;
  background-color: #FFF;
}

.header {
  width: 100%;
  height: 350px;
  background-color: #DDD;
  position: relative;
}

.channel-info-sash {
  display: flex;
  align-items: center;
  position: absolute;
  padding: .5rem;
  top: 0;
  left: 0;
  color: #FFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
}

解决方案 #

完全可以用纯CSS实现，推荐两种实用方法：

方法1：多重背景渐变叠加 #

给标题栏设置两层渐变背景：一层保留原有的上下黑-to-透明渐变，另一层添加右侧的左-to-右透明渐变，让右侧边缘自然过渡。修改后的.channel-info-sash CSS如下：

.channel-info-sash {
  display: flex;
  align-items: center;
  position: absolute;
  padding: .5rem;
  top: 0;
  left: 0;
  color: #FFF;
  /* 第一层：上下方向渐变；第二层：右侧透明渐变 */
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to right, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

方法2：CSS遮罩实现边缘淡出 #

利用CSS遮罩属性，在标题栏右侧添加一个渐变遮罩，既保留原有上下渐变，又让右侧平滑透明。修改后的.channel-info-sash CSS如下：

.channel-info-sash {
  display: flex;
  align-items: center;
  position: absolute;
  padding: .5rem;
  top: 0;
  left: 0;
  color: #FFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
  /* 右侧渐变遮罩：从左到右从完全显示到透明 */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

说明：两种方法都能解决右侧边缘生硬的问题，方法2无需修改原有背景渐变，仅通过遮罩控制边缘透明度，灵活性更高。可以调整渐变中的百分比（比如把85%改为90%）来控制右侧淡出的范围。

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