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

问题描述

问 题

一个设置了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图不显示，在背景上的就显示。应该表达的很清楚了，希望各位帮我找找解决方法，或关于这个效果的关键词，谢谢。

解决方案

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

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

这篇关于javascript - 一个设置了png背景图的div，里面放了一个png，里面的怎么超出隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！