当我向下滚动时,我的背景图像(蓝色的)变成了白色区域,而它也应该是蓝色的。蓝色背景应该到处都是蓝色,但是因为它是倾斜的并且我将它用作固定背景图像,所以它不起作用,不知何故。
HTML:
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>
CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}
你能看到的白色背景,是正文背景。它不应该在那里,但它以某种方式存在。当我删除 background-attachment: fixed
时,它起作用了,但我想修复它,因为我正在使用视差滚动。
看起来 transform: skewY(3deg);
和 background-attachment: fixed
互相阻挡。我尝试添加 z-index 等等,但目前没有任何效果。
有办法解决这个问题吗?
最佳答案
要固定斜率仅出现在底部,请使用伪。
为了让skewY()
向上变换,使用transform-origin: right top;
,然后设置overflow: hidden
到wrapper剪裁上部,坡度仅在底部可见。
html, body {
margin: 0;
}
body {
background: red;
}
.wrapper {
position: relative;
height: 200px;
width: 100%;
min-height: 1500px;
overflow: hidden;
}
.wrapper.nr2::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper div {
position: relative;
color: red;
font-size: 30px;
}
<div class="wrapper nr2">
<div>Some text</div>
</div>
<div class="wrapper">
<div>Some more text</div>
</div>
关于html - 转换背景和固定位置时如何摆脱重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44619571/