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參數：它們是距離左上角的距離，但是值按上，右，下，左順序指定。不是很直觀，並且有幾個網站無法正確記錄這一點。