为video增加遮罩层

absolute 元素的百分比宽高 是相对于其最近的 父级别的absolute/relative 元素来计算的(如没有则对body)

相对应的数值为 自身区域+ padding 的区域总和


为video增加遮罩层_第1张图片
image.png
为video增加遮罩层_第2张图片
image.png
.video-avatar-item{
    display: inline-flex;
    margin: 2px 10px 2px 10px;
    padding: 0;
    border-radius: 50%;
    background-color: #000;
    border-color: #fff;
    overflow: hidden;
    width: 64px;
    height: 64px;
    position: relative;
    video{ 
        width:64px; 
        height:64px;
        object-fit: cover;
        cursor: pointer;
    }
    video.video-stream.camera{
        position: relative;
    }
    .local-client video.video-stream.camera{
        //left: unset;
        //border-radius: 50%
    }
    .overlay-wrapper {
        position:absolute;
        height:100%;
        width:100%;
        top:0;
        left:0;
        z-index:200;
        display:block;
        background:rgba(0, 0, 0, .7)
    }
}

你可能感兴趣的:(为video增加遮罩层)