一般来说象这种效果实现还是比较有意思的

在文字下层加上一定高度的背景色，半透明，而且模糊。。。
话不多说，上代码： 
.text_bg {
display: inline-block;
position: relative;
z-index: 1;
}

.text_bg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background-color: #B6D16F;
opacity: .7;
z-index: -1;
filter: blur(1px); /* 可选：模糊效果 */
}
上述代码中最重要的其实就是那两个z-index。否则你会发现背景色其实压在了文字上方。
其他的基本上都是基本操作，只是额外用了一个:after的伪类。在当前这个例子里。用before和after的最终显示效果其实是一样的