如何在HTML5中剪辑（掩盖）对象？

Question

我的页面中有一个大的背景图像。在背景图像上方有一个白色背景。因此，如果我滚动，在菜单后面我们可以看到背景图像滚动。在体内，我希望在白色背景内剪切一些物体（颜色或图像没问题）。滚动时，白色背景和背景图像同时滚动。我知道如何剪辑但不确定如何剪辑对象并使它们与滚动条一起移动.enter image description here

Answer 1

您可以使用剪辑路径：

img {
  clip-path: url(#clipping);
}

Full description

Answer 2

尝试这个，它在浏览器中工作，但在小提琴它有一些问题：

HTML：

<div id="container"></div>
<div id="tall"></div>
<div id="circle"></div>
<div id="square"></div>

CSS：

body{
background-image:url(your Background image address);
margin:0;
padding:0;}
    #container{
width:100%;
height:100%;
position:fixed;
background-color:rgba(255,255,255,0.8);}
    #circle{
background-image:url(your Background image address);
width:200px;
height:200px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
z-index:99;
position:fixed;
left:50%;
top:50px;}
    #square{
width:300px;
height:300px;
position:fixed;
z-index:99;
left:100px;
top:150px;
background-image:url(your Background image address);}
    #tall{
width:100%;
height:2000px;}

JS：

setInterval(function(){
    document.getElementById("square").style.backgroundPosition=("0px"+" "+'-'+document.body.scrollTop+"px");
    document.getElementById("circle").style.backgroundPosition=("0px"+" "+'-'+document.body.scrollTop+"px");
    },1);