css剪辑遮罩的视差效果

Question

我想剪辑蒙版图像到其背景，所以它不会重叠，但不知道如何去做。我试过后台剪辑盒/填充，它不起作用。

我试过使用剪辑：rect（）;它没有做任何事情，除非我做错了。

https://jsfiddle.net/LxgcLggq/

<div class="paralax"> 
     <div class="fast"></div> 
     <div class="medium"></div> 
     <div class="slow"></div> 
    </div> 

.paralax{ 
width: 100%; 
height: 306px; 
background: #ccc; 
position: relative; 
display: block; 
clear: both; 
} 

.fast{ 
    background: url(http://s13.postimg.org/v7rm6cidj/fast.png); 
    width: 100%; 
    height: 193px; 
} 
.medium{ 
    background: url(http://s7.postimg.org/ae6yxfd4b/medium.png); 
    width: 100%; 
    height: 510px; 
    clip: rect(0px, 0px, 100px, 0px); 
} 

Answer 1

需要设置在对象上absolute或fixed定位，然后展开矩形的左侧（第二位置），如下所示：

.parallax { 
 
    width: 100%; 
 
    height: 306px; 
 
    background: #ccc; 
 
    position: relative; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.medium { 
 
    background: url(http://s7.postimg.org/ae6yxfd4b/medium.png); 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 510px; 
 
    clip: rect(0px, 1025px, 100px, 0px); 
 
}

<div class="parallax"> 
 
    <div class="medium"></div> 
 
</div>

注意：clip已弃用（但仍起作用在许多浏览器中），而clip-path其替换可能不适用于所有浏览器。

此外，要指定rect参数：它们是距离左上角的距离，但是值按上，右，下，左顺序指定。不是很直观，并且有几个网站无法正确记录这一点。