不需要的透明空间与偏斜的div

Question

我正在尝试创建一个用偏斜/旋转的divs创建一个网站，但是我对具有固定背景图像的网站有问题。

代码最能描述问题：

https://codepen.io/poveu/pen/pwjwyx

<div class="skewed_fixed">
        <div class="content">
      This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
    </div>
</div>
<div class="skewed_normal">
    <div class="content">
      This background is not fixed and behaves properly.
    </div>
</div>
<div class="margin"></div>
.skewed_fixed {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    background-attachment: fixed;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
}
.content {
    height: 300px;
}
.skewed_normal {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
}
.margin {
    height: 600px;
}

（背景大小：盖子和宽度：100％在这里只是为了使BG拟合100％宽度； Margin Div是使页面可滚动）

）

我想滚动整个div的背景"蒙版"，因此滚动时，白空间消失了。

我试图将其与转换原始：左；但是随后透明的空间出现在Div。

的底部

有什么简单的（非JS）实现我想要的方法吗？

Answer 1

我已经使用了偏斜属性的Translate属性。尝试一下。

.skewed_fixed {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    background-attachment: fixed;
    transform: skewY(-3deg) translate(0px, -50px);
    background-size: cover;
    width: 100%;
}
.content {
    height: 300px;
  padding-top: 60px;
}
.skewed_normal {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    transform: skewY(-3deg) translate(0px, -50px);
    background-size: cover;
    width: 100%;
}
.margin {
    height: 600px;
}

<div class="skewed_fixed">
		<div class="content">
      This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
    </div>
</div>
<div class="skewed_normal">
    <div class="content">
      This background is not fixed and behaves properly.
    </div>
</div>
<div class="margin"></div>

Answer 2

您可以在位置和边距或填充物上播放以补偿空空间：

 .skewed_fixed {
    background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
    background-attachment: fixed;
    transform: skewY(-3deg);
    background-size: cover;
    width: 100%;
    background-position: 0px -100px;
    top:-50px;
    position:relative;
    margin-top:50px;
}