背景图片加蒙版，里面内容不受影响

<template>

    <div class="select-bg">

        <div class="select-box">

            <div class="btn-box">

                <button class="select-btn black">项目看板</button>

                <button class="select-btn blue">系统设置</button>

            </div>

        </div>

    </div>

</template>

　　

<style lang="scss"  scoped>
    .select-bg{
        height: 100%;
        background: url(https://mobile-i-uj.oss-cn-hangzhou.aliyuncs.com/zhdt/static/images/select-bg.jpeg) no-repeat center;
        background-size: 100% 100%;
        min-width: 968px;
        &::before{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgba(255,255,255, .5);
            z-index: 1;
        }
        .select-box{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            z-index: 3;
            display: flex;
            align-content: center; 
            justify-content: center; 
            .btn-box{
                display: flex;
                flex-direction: column;
                justify-content: center;
                .select-btn{
                    border: none;
                    color: #fff;
                    width: 500px;
                    height: 90px;
                    border-radius: 5px;
                    font-size: 38px;
                    font-weight: bold;

                    &:nth-of-type(1){
                        margin-bottom: 50px;
                    }
                    &.black{
                        background-color: #000000;
                    }
                    &.blue{
                        background-color: #169bd5;
                    }
                }
            }
        }
    }
</style>