Question

请帮助我，我很绝望。

我有这个：

.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; 
}

这有点工作，但仍然是一个奇怪的事情发生在那个三角形，它滚动时改变了它的尺寸。有人可以发现我做错了吗？

谢谢，

Answer 1

我找到了答案;）

只需将Position:fixed;更改为background-attachment: fixed

即可

修复了clip-path css / html中的图像

1 个答案: