固定圖像裏面的剪輯路徑css/html

我有這樣的：

.post-wrapper_ext 
{ 
    position: absolute; 
    width: 536px; 
    height: 900px; 
    float: left; 
    background: url("http://9lives.co.za/wp-content/uploads/2014/02/Chicago.jpg") center center no-repeat; 
    color: transparent; 
    -webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%); 
}

這將產生一個三角形內部的圖像。但是，我想創建一個效果，當我向下滾動時，圖像被修復。

所以我做了這個變化：

HTML

<div class="post-wrapper_ext"><div id="img1"></div></div>

CSS

.post-wrapper_ext { 
    position: absolute; 
    width: 536px; 
    height: 900px; 
    float: left; 
    color: transparent; 
-webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%); 
} 

#img1 
{ 
    background: url("http://9lives.co.za/wp-content/uploads/2014/02/Chicago.jpg") center center no-repeat; 
    width: 536px; 
    height: 900px; 
    position:fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

這工作有點，但仍療法是一個奇怪的事情發生在那個三角形，當我滾動時它會改變它的尺寸。有人可以發現我做錯了什麼嗎？

感謝，

來源

2014-03-24 gn66

我找到了答案;）

只要改變：Position:fixed;到background-attachment: fixed

來源

2014-03-24 21:16:18 gn66

固定圖像裏面的剪輯路徑css/html

回答

相關問題