固定背景封面在移动视图中被放大答案

【问题标题】：Fixed background cover becomes zoomed in mobile view固定背景封面在移动视图中被放大
【发布时间】：2022-03-31 07:40:50
【问题描述】：

我在这里为我的网站使用固定的背景封面：http://www.datisdesign.com

每个页面都有一个大标题图片，但在手机等小型设备中，封面图片变得如此之大。我想让它在移动设备上更小。

这是我正在使用的代码：

#takelessons {
    background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
}

【问题讨论】：

试过background-size:contain？或background-size:auto?

标签： html css mobile interface

【解决方案1】：

我通过将功能限制为大平板屏幕尺寸解决了我的问题。

@media screen and (max-width: 992px) {
    #parallax {
        background-attachment: scroll;
    }
}

【讨论】：

【解决方案2】：

给你:)

将以下内容添加到您的样式中...

background-size:100%;
width:100%;

希望对你有帮助

【讨论】：

在这里不起作用，导致多张图片而不是一张。不过谢谢！

【解决方案3】：

试试这个

background: url(image.format) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

【讨论】：

【解决方案4】：

我发现如果background-size: cover 与background-attachment: fixed 一起使用，则会在移动设备上导致此问题。

从“固定”更改为“滚动”可以修复它。

在我的例子中，我使用 Javascript 来实现我的视差效果，因此我能够更新方程以考虑不同的背景行为。

【讨论】：