固定图像里面的剪辑路径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

回答

相关问题