css一半背景颜色

.title {
    display: inline-block;
    position: relative;
}

 .title::before {
    width: 100%;
    height: 30%;
    background: rgba(84, 118, 251, 0.85);
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
}

效果