Question

我试图创建一个有倾斜/旋转div的网站，但我对那些有固定背景图片的网站有疑问。

代码描述了最佳问题：

<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％宽度;边缘div是为了使页面可滚动）

我想用它的背景滚动整个div＆＃34; mask＆＃34;所以当向下滚动时，空白区域会消失。

我试图将它与变换原点混合：left;但是透明空间出现在div的底部。

有没有简单的（非JS）方法来实现我的目标？

Answer 1

您可以使用位置和边距或填充来补偿空白区域：

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

Answer 2

我使用了具有skew属性的translate属性。试试这个。

＆＃13;

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

＆＃13;

<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>

＆＃13;

带有偏斜div

2 个答案: