背景：固定没有重复不能在移动设备上工作
Posted
技术标签:
【中文标题】背景：固定没有重复不能在移动设备上工作【英文标题】：background: fixed no repeat not working on mobile 【发布时间】：2014-10-14 23:33:46 【问题描述】：我正在构建一个网页，我希望背景图像可以缩放以适应整个屏幕，保持纵横比并固定（因此，如果向下滚动，背景图像会保持在同一个位置）。
我在桌面浏览器中使用下面的 CSS 实现了这一点，但它不适用于 iPhone 或 iPad。在这些设备上，背景太大（它在折叠下方继续），如果您向下滚动得足够远，图像将开始重复。有人有解决办法吗？谢谢！
html
background: url(photos/2452.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
【问题讨论】：
这是一个已知的错误，背景附件：已修复，我记得 ios 可以追溯到很久以前。我使用 jQuery 来检测 IOS 并提供一些它不会搞砸的东西。 【参考方案1】：我找到了一个很好的解决方案，可以在根本不需要 javascript 的移动设备上固定背景。
body:before
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
请注意-10 的负值z-index。 html 根元素默认 z-index 是 0。该值必须是最小的z-index 才能作为背景。
【讨论】：
干得好，伙计！到目前为止，这是唯一适用于 iOS 的解决方案。 应该被接受，确认在最新的opera mini、chrome mobile和firefox mobile上工作。 滚动时闪烁 ok 在android上，当你放一张图片时，顶部的地址栏会占用一些空间，当你向下滚动时它会占用相当于地址栏的空白，然后一秒钟后它会删除空白并获取覆盖该区域的图像 这有点用，但会破坏 IE 和 Edge。如果您有一个带有负 z-index 的背景图像的元素，它会在不断滚动时跳跃。【参考方案2】：在尝试了所有解决此问题的方法之后，我有一个非常简单的解决方案。
我在移动 IOS 设备上遇到了问题。
css（桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap
background-size: auto;
background-attachment: fixed;
.widget-wrap
background-attachment: scroll;
然后我用媒体查询覆盖它，删除“固定”作为背景附件。
css（移动）
@media (max-width: 767px)
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap
background-attachment: initial;
initial - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会退回到它接受的默认值，滚动。
这对我在每台设备上都有效。希望它也对其他人有所帮助。
【讨论】：
不幸的是，这种基于大小的解决方案并不好。如果我用 iPad 横向浏览它会失败，特别是如果我使用 1024x1366 的 iPad Pro 12"... 顺便说一句，你的代码测试 767 像素，但普通 iPad 是 768。 @SpaceDog 然后添加基于该设备的媒体查询。这只是为了了解解决方案背后的想法。 无论如何该解决方案不起作用。我在使用 iOS 10 和 11 的 iPad Pro 上进行了测试，图像继续滚动。【参考方案3】：感谢 Vincent 的努力和 Joey Hayes 的工作，我有这个 codepen 在支持多个固定背景的 Android 手机上工作
HTML：
<html>
<body>
<nav>Nav to nowhere</nav>
<article>
<section class="bg-img bg-img1">
<div class="content">
<h1>Fixed backgrounds on a mobile browser</h1>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section>
<div class="content">
<p>Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore. Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat libero vel,
euismod.
</p>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section class="footer">
<div class="content">
<h3>The end is nigh.</h3>
</div>
</section>
</article>
</body>
CSS：
*
box-sizing: border-box;
body
font-family: "source sans pro";
font-weight: 400;
color: #fdfdfd;
body > section >.footer
overflow: hidden;
nav
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
background-color: silver;
z-index: 999;
text-align: center;
font-size: 2em;
opacity: 0.8;
article
position: relative;
font-size: 1em;
section
height: 100vh;
padding-top: 5em;
.bg-img::before
position: fixed;
content: ' ';
display: block;
width: 100vw;
min-height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-position: center;
background-size: cover;
z-index: -10;
.bg-img1:before
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326836/3balls_1280.jpg');
.bg-img2::before
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326840/icebubble-1280.jpg');
.bg-img3::before
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326844/soap-bubbles_1280.jpg');
h1, h2, h3
font-family: lato;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
.content
max-width: 50rem;
margin: 0 auto;
.solid
min-height: 100vh;
width: 100%;
margin: auto;
border: 1px solid white;
background: rgba(255, 255, 255, 0.6);
.footer
background: rgba(2, 2, 2, 0.5);
JS/JQUERY
window.onload = function()
// Alternate Background Page with scrolling content (Bg Pages are odd#s)
var $bgImg = $('.bg-img');
var $nav = $('nav');
var winh = window.innerHeight;
var scrollPos = 0;
var page = 1;
var page1Bottom = winh;
var page3Top = winh;
var page3Bottom = winh * 3;
var page5Top = winh * 3;
var page5Bottom = winh * 5;
$(window).on('scroll', function()
scrollPos = Number($(window).scrollTop().toFixed(2));
page = Math.floor(Number(scrollPos / winh) +1);
if (scrollPos >= 0 && scrollPos < page1Bottom )
if (! $bgImg.hasClass('bg-img1'))
removeBg( $bgImg, 2, 3, 1 ); // element, low, high, current
$bgImg.addClass('bg-img1');
else if (scrollPos >= page3Top && scrollPos <= page3Bottom)
if (! $bgImg.hasClass('bg-img2'))
removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
$bgImg.addClass('bg-img2');
else if (scrollPos >= page5Top && scrollPos <= page5Bottom)
if (! $bgImg.hasClass('bg-img3'))
removeBg( $bgImg, 1, 2, 3 ); // element, low, high, current
$bgImg.addClass('bg-img3');
$nav.html("Page# " + page + " window position: " + scrollPos);
);
// This function was created to fix a problem where the mouse moves off the
// screen, this results in improper removal of background image class. Fix
// by removing any background class not applicable to current page.
function removeBg( el, low, high, current )
if (low > high || low <= 0 || high <= 0)
console.log ("bad low/high parameters in removeBg");
for (var i=low; i<=high; i++)
if ( i != current ) // avoid removing class we are trying to add
if (el.hasClass('bg-img' +i ))
el.removeClass('bg-img' +i );
// removeBg()
【讨论】：
【参考方案4】："背景尺寸：封面；"在除 Firefox 之外的所有移动浏览器上导致很多问题！
这解决了我的问题：
/* Mobile first */
body
background-image: url(bg_mobile.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
/* Then tablets, laptops and desktops (768px and up) */
@media screen and (min-width:768px)
body
background-image: url(bg.jpg);
background-size: cover;
【讨论】：
【参考方案5】：我发现视差效果的最佳解决方案可能适用于所有设备。
主要是设置所有 z-index 大于视差部分的部分。
并且视差图像元素设置为固定最大宽度和高度
body, html margin: 0px;
section
position: relative; /* Important */
z-index: 1; /* Important */
width: 100%;
height: 100px;
section.blue background-color: blue;
section.red background-color: red;
section.parallax
z-index: 0; /* Important */
section.parallax .image
position: fixed; /* Important */
top: 0; /* Important */
left: 0; /* Important */
width: 100%; /* Important */
height: 100%; /* Important */
background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
<section class="blue"></section>
<section class="parallax">
<div class="image"></div>
</section>
<section class="red"></section>【讨论】：
【参考方案6】：找到问题的完美解决方案 100% 在移动和桌面上工作
https://codepen.io/mrinaljain/pen/YObgEP
.jpx-is-wrapper
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 314749261;
width: 100vw;
height: 300px
.jpx-is-wrapper>.jpx-is-container
background-color: transparent;
border: 0;
box-sizing: content-box;
clip: rect(auto auto auto auto);
color: black;
left: 0;
margin: 0 auto;
overflow: visible;
position: absolute;
text-align: left;
top: 0;
visibility: visible;
width: 100%;
z-index: auto;
height: 300px
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content
left: 0;
overflow: hidden;
right: 0;
top: 0;
visibility: visible;
width: 100%;
position: relative;
height: 300px;
display: block
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad
-webkit-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
-moz-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
bottom: 26px;
left: 0;
margin: 0 auto;
right: 0;
text-align: center;
height: 588px;
top: 49px;
bottom: auto;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0)
.jpx-position-fixed
position: fixed
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad>.jpx-is-ad-frame
width: 100%;
height: 100%
.black-fader
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.75
.video-containers
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0
.video-containers video,.video-containers img
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>
<div class="jpx-is-wrapper">
<div class="jpx-is-container">
<div class="jpx-is-content">
<div class="jpx-is-ad jpx-position-fixed">
<div scrolling="no" class="jcl-wrapper" style="border: 0px; display: block; width: 100%; height: 100%;">
<div class="video-containers" id="video-container">
<img src="https://via.placeholder.com/350x150" class="">
</div>
</div>
</div>
</div>
</div>
</div>
<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>【讨论】：
【参考方案7】：据我所知，IOS Safari 中的background-attachment:fixed 一直是一个已知错误。
这里有一些其他的选择：
https://***.com/a/23420490/1004312
由于一般来说固定位置在触摸时并不是那么稳定（有些比其他的更稳定，Chrome 工作得很好），它在 Safari IOS 8 中仍然可以在以前在 IOS 7 中工作的情况下运行，因此我通常只是使用 JS 检测触控设备，包括 Windows mobile。
/* ============== SUPPORTS TOUCH OR NOT ========= */
/*! Detects touch support and adds appropriate classes to html and returns a JS object
Copyright (c) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au
Licensed under the MIT license | https://coderwall.com/p/egbgdw
*/
var supports = (function()
var d = document.documentElement,
c = "ontouchstart" in window || navigator.msMaxTouchPoints;
if (c)
d.className += " touch";
return
touch: true
else
d.className += " no-touch";
return
touch: false
)();
CSS 示例假定移动优先：
.myBackgroundPrecious
background: url(1.jpg) no-repeat center center;
background-size: cover;
.no-touch .myBackgroundPrecious
background-attachment:fixed;
【讨论】：
【参考方案8】：我迟到了，但这是（令人难以置信的）still a problem，截至 2017 年 5 月 11 日。这是一个简单的解决方案，它也适用于跨平台与线性渐变：
.backgroundFixed
background: linear-gradient(160deg, #2db4a8 0%, #13af3d 100%);
background-size: 100vw 100vh;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: -1000;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div class="backgroundFixed"></div>
<div class="paragraphContainer">
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
</div>
</body>
</html>【讨论】：
在 iOS 11 和 10 上测试过，但在两者上都不起作用。【参考方案9】：两天来，我一直在忙于使用不同的帖子和方法来解决这个问题。我敦促任何人从查看 Eggs 的帖子开始，并弄乱他和其他人构建的 codepen。
这是我发现的唯一适合我的解决方案。对于我们这些仍在自己的 Web 应用程序中解决这个问题的人，我建议他的回答作为一个解决方案/一个好的起点。
我还没有足够的声誉来评论他的帖子，否则我会的。我什至还不能投票，否则我也会这样做。
这是我使用的实际代码：
html::before
content: ' ';
display: block;
background-image: url('path-to-your-image');
background-position: bottom left;
/*For my instance this is how I have built my bg image. Indexes off the
bottom left for consistency*/
background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
/*I haven't tested my full app functionality after changing the z-index, but everything appears to work flawlessly right now.*/
我用他的原始代码尝试了一切。当我有
background-position: center;
chrome（截至 18 年 1 月 8 日的最新 android 更新）会滞后于更新图像的位置，因此当滚动浏览网站时，我的浏览器导航栏/URL 栏所在的位置会出现一块颜色。然后它会在浏览器重新计算图像中心后消失（我假设正在发生）。
因此，我建议像我一样在您的页脚或页眉周围制作一个图像，并为您的位置设置左上/右下或左/右下。
总之，这对我有用。因此，如果您正在阅读这么远并且还没有任何效果，请尝试一下。尽管您现在应该已经点击了原始帖子。
感谢 Eggs 以及与您合作开发 Codepen 的其他伙伴。
【讨论】：
【参考方案10】：我认为移动设备不适用于固定位置。您应该尝试使用一些 js 插件，例如 skrollr.js（例如）。使用这种插件，您可以根据滚动条位置选择 div（或其他）的位置。
【讨论】：
skrollr 开发于 2014 年停止，甚至表示“移动支持总是很糟糕（因为移动浏览器很难）。”我强烈建议参考接受的答案【参考方案11】：自 Android 2.2 和 iOS 5 起，移动设备支持固定定位。
您需要在 meta 上使用带有视口的设备，并在某个位置提供带有 id 的背景图像。然后你会用 jquery 得到那个 id 并给它一个高度。当然还有 100% 宽度
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#main
background: url(1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
overflow: hidden;
</style>
</head>
<body id="main">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var hgt = $(window).height();
$("#main").css("height", hgt)
</script>
http://jsfiddle.net/talendil/oackpmv5/
【讨论】：
【参考方案12】：查看我对这个问题的回答：Detect support for background-attachment: fixed?
单独检测触摸功能不适用于带有触摸屏的笔记本电脑，并且 Christina 检测触摸提供的代码在某些设备上会失败。 Hector 的回答会起作用，但动画会很不稳定，所以在不支持固定的设备上用滚动替换固定看起来会更好。 很遗憾，Taylon 认为 iOS 5+ 支持背景附件是不正确的：已修复。它不是。我找不到任何不支持固定背景的设备列表。大多数手机和平板电脑可能都没有。【讨论】：
【参考方案13】：我也遇到了同样的问题，但现在可以了。
我所要做的就是添加background-size: cover !important;，它可以在我的Android设备上运行！
整个代码如下所示：
body.page-id-8 #art-main
background: #000000 url("link to image") !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
background-attachment: fixed !important;
background-color: transparent !important;
background-size: cover !important;
非常感谢@taylan derinbay 和@Vincent！
【讨论】：
这似乎不适用于带有 Nougat 的 Google Nexus。【参考方案14】：这就是我所做的，它无处不在:)
.container
background: url($myImage)
background-attachment: fixed;
background-size: cover;
transform: scale(1.1, 1.1);
那么……
@media only screen and (max-width: 768px)
background-size: 100% 100vh;
【讨论】：
【参考方案15】：您可以使用此标记使“固定”定位元素在移动设备上正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【讨论】：
禁用用户放大和缩小网页的能力是糟糕的网页设计实践，尤其是在可能已经有一个小屏幕的移动设备上，这使得视力不佳的人难以阅读的。【参考方案16】：嗯，就我而言，我只是在使用这段代码并且它有效。
@media (max-width: 768px) .classname:before
content: "";
background-image: url(link of your image);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
它起作用的原因是为移动设备添加代码时需要的媒体标签。
【讨论】：
以上是关于背景：固定没有重复不能在移动设备上工作的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的导航栏“位置：固定”显示在网页底部而不是移动设备的视口底部？