标签: webkit-mask

我正在玩-webkit-mask-box-imagecss属性.

<div style="
    background-color: red;
    -webkit-mask-box-image: url('images/cards/set1.png');
"></div>

这非常有效.我最终得到了蒙版图像形状的红色元素.

唯一的问题是我需要大约25个不同的图像.我可以加载25个不同的蒙版图像,但如果我只加载一个图像然后使用它类似于CSS精灵,我重新定位或剪辑它会很棒.

但我想不出用掩码属性做到这一点的好方法.它可行吗？

我想出的一个解决方案是使用类似于此的标记:

<div style="
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative;">
    <div style="
        background-color: red;
        -webkit-mask-box-image: url('images/cards/set1.png');
        position: absolute;
        top: -400px
    "></div>
</div>

我没有像使用精灵那样使用背景图像并将其定位,而是使用DIV并将其定位在用于裁剪它的父div中.我认为这是一个不错的选择,但是想知道是否有一个以webkit为中心的CSS属性已经设计好了.

我认为这个问题已被多次提出过.其中一些可以在Chrome或Firefox上运行.

我尝试了解决方案:

 .rc{
 width: 250px;
 height: 250px;
 border-radius: 100%;
 -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 -webkit-transform: rotate(0.000001deg); 
 -webkit-border-radius: 100%; 
 -moz-border-radius: 100%;
}

将此添加到div类,并将视频标记的高度更改为

<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>

视频源来自webrtc,使用getusermedia,视频流可以成功地成形为圆圈,并使用rc类立即显示在网页上.

问题是每次,视频源都不会处于圆形的中心,它会保持一点左侧.例如,当我的脸在镜头前时,只有一部分脸部位于圆形的右侧.它不在圆圈的中心.谁知道如何解决这个问题？

谢谢.