Question

我正在建立一个个人网站。但我有一个很大的问题，背景附件：修复不适用于移动设备。我有4个部分，固定bg，+ javascript效果。

最后一节非常重要...... 有人可以帮我解决这些问题吗？我真的很赞成。该网站位于：my site

.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center

//抱歉我的英文不好，

Answer 1

不幸的是，它不支持移动浏览器......每次滚动时浏览器都必须完全重新渲染图像，而过去它的性能损失太大了，尽管看起来支持它似乎是开始涓涓流淌https://css-tricks.com/almanac/properties/b/background-attachment/。目前获得类似效果的唯一方法是将你的背景作为单独的元素与位置：固定，像... ...

.background{
 position: fixed;
 background-image: url(image source);
 top: 0;
 left: 0;
 width: 100%;
 height: 100%:
 z-index: 0;
}

滚动它的所有内容都应该有位置：relative或position：绝对值，z-index大于0。

background-attachment：fixed不适用于移动设备

1 个答案: