一个设置了png背景图的div，里面放了一个png，里面的怎么超出隐藏

Question

一个设置了png背景图的div，里面放了一个png，里面的怎么超出隐藏

html

<div class="black-box">
     <img src="./images/logo.png" alt="">
</div>

css

.black-box {
    position: absolute;
    top: 38vw;
    left: -32vw;
    width: 190vw;
    height: 80vw;
    background: url(../../images/black.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    img {
        position: fixed;
        top: 52vw;
        left: 20vw;
        width: 60vw;
    }
}

后面的div可以左右动，前面的图片是固定在中间的。
现在的问题就是怎么在图二的样子时超出背景的部分隐藏，还在背景上的继续显示。

我要的是这样的效果。就是logo图不动。背景动，不在黑色背景上的logo图不显示，在背景上的就显示。应该表达的很清楚了，希望各位帮我找找解决方法，或关于这个效果的关键词，谢谢。

Answer 1

可以使用CSS样式的mix-blend-mode（图像混合模式）和background-blend-mode（背景混合模式），注意浏览器兼容性即可。

参考：
https://developer.mozilla.org...
https://developer.mozilla.org...
http://www.zhangxinxu.com/wor...

Answer 2

你是想要图二跟图一一样吗

Answer 3

你这涉及到图片间的计算，光靠backgroundImage和img这样肯定是搞不定的。
建议（从易到难）：

1. 要不做成一个gif，

2. 如果需要对动画行为做控制，建议做成SpriteSheet

3. canvas

Answer 4

css有个clip-path，还有SVG也能做遮挡，但是你这个的问题应该是你后边的这个黑色部分算是个位图，而前两种方案都是结合矢量来搞的，所以要做这个效果要不就在前边加个透明区域，要不就直接内嵌视频或者逐帧、GIF之类的吧……