Word文字下方叠加颜色效果

<!-- HTML结构 -->
<div class="text-with-bg">
    <span>彩色文字效果</span>
</div>

<!-- CSS样式 -->
.text-with-bg {
    display: inline-block;
    padding: 12px 24px;
    font-size: 28px;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.text-with-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 6px;
}

.text-with-bg span {
    position: relative;
    z-index: 2;
}