Question

我使用 background-attachment: fixed; 作为背景图片，它在桌面上适用于所有浏览器，在桌面移动视图上也很好，但是当我在真实设备上检查它时，它的外观各不相同，任何建议都将不胜感激

桌面移动视图 https://i.stack.imgur.com/Vmrc7.png

原始移动视图 https://i.stack.imgur.com/nhUaP.png

谢谢

Answer 1

这似乎是一个常见问题，我猜你是在 chrome 还是 safari 上检查过这个问题？一种可能的解决方法是将转换代码添加到具有背景固定属性的元素的 css 中。

#element{
background-image: url(https://images.unsplash.com/photo-1495578942200-c5f5d2137def?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1354&q=80);
color: #fff;
width: 100%;
height: 600px;
position: relative;
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

工作 js 小提琴：https://jsfiddle.net/Vaulient/f5zy2udt/2/

Answer 2

你能看看下面的代码吗？希望它对你有用。 data sample; input id date numeric_feature character_feature $; informat date yymmdd10.; datalines; 1 2020-01-01 5 A 1 2020-01-02 3 Z 1 2020-01-03 3 Z 1 2020-01-04 2 D 1 2020-01-05 7 B 2 2020-01-01 4 V 2 2020-01-02 4 V 2 2020-01-03 1 B 2 2020-01-04 1 B 2 2020-01-05 9 F ; data sample; set sample; format date yymmdd10.; run; 在大多数 iOS 真实设备中会产生问题，因此我们必须尝试使用 jQuery 函数 background-attachment: fixed; 来实现。

请参考此链接：https://jsfiddle.net/yudizsolutions/e3xgtqz4/9/

$(window).scrollTop()

$( document ).ready(function() {
  $(window).scroll(function() {
    $('body').css('background-position', 'center ' + $(window).scrollTop() + 'px');
  });
});

body {
    background: url('http://www.jquery-az.com/html/images/banana.jpg') no-repeat center center / cover;
    color: #fff;
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: block;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
}

背景附件：固定；不适用于移动设备

2 个答案: