用於視差效果的 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定位，然后像這樣擴展 rect 的左側（第二個位置）：

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