一般来说象这种效果实现还是比较有意思的
在文字下层加上一定高度的背景色，半透明，而且模糊。。。
话不多说，上代码：
CSS代码
- .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的最终显示效果其实是一样的