我正在构建一个网页，我希望背景图像可以缩放以适应整个屏幕，保持纵横比并固定（因此，如果向下滚动，背景图像将保持在同一位置）。
我已经在桌面浏览器中使用下面的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;
}
答案 0 :(得分：89)
我找到了一个很好的解决方案，适用于不需要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;
}
请注意z-index的{{1}}值为-10。 html根元素默认z-index为0。该值必须是最小的z-index才能将其作为背景。
答案 1 :(得分：4)
在解决了解决这个问题的所有方法之后，我有一个非常简单的解决方案。
我在移动IOS设备上遇到了问题。
css （桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}
.widget-wrap {
background-attachment: scroll;
}
然后我用媒体查询删除＆＃34;修复＆＃34;作为背景附件。
css （移动）
@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-attachment: initial;
}
}
initial - 将此属性设置为其默认值。我认为因为IOS不接受“修复”＃39;它回退到它接受的默认值，滚动。
这适用于我的每台设备。希望它也可以帮助其他人。
答案 2 :(得分：2)
找到了解决问题的完美方法 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" width="100%" height="100%" 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" alt="" 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>
答案 3 :(得分：1)
background-attachment:fixed就是一个众所周知的错误。
以下是其他一些选项：
https://stackoverflow.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;
}
答案 4 :(得分：1)
感谢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()
答案 5 :(得分：1)
我发现视差效果的最佳解决方案适用于所有设备。
主要是设置 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 :(得分：1)
＆＃34; background-size：cover;＆＃34;除了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;
}
}
答案 7 :(得分：1)
我一直在忙着使用不同的帖子和方法两天试图解决它。我敦促任何人通过查看Eggs的帖子来开始，并且把他和其他人建立的编码器搞得一团糟。
这是我找到的唯一适合我的解决方案。我建议他的答案作为解决方案/至少是一个良好的起点，对于我们这些仍然在我们自己的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（最新的Android更新截至1/8/18）将延迟更新图像的位置，因此当滚动浏览网站时，我的浏览器的导航栏/ URL栏会有一块颜色。然后它会在浏览器重新计算图像中心后消失（我假设正在发生这种情况）。
因此，我建议像我一样在你的页脚或标题周围制作一个图像，并为你的位置设置左上/右上或左下/右下角。
总之，这对我来说很有用。如果你正在阅读这篇文章并且还没有任何工作，那就试试吧。虽然你现在应该已经打过原帖了。
感谢Eggs，以及您与Codepen合作的其他人。
答案 8 :(得分：0)
我认为移动设备不能使用固定位置。你应该试试一些像skrollr.js这样的js插件（例如）。使用这种插件，您可以根据滚动条位置选择div（或其他）的位置。
答案 9 :(得分：0)
自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>
答案 10 :(得分：0)
请参阅我对此问题的回答：Detect support for background-attachment: fixed?
答案 11 :(得分：0)
我一直有同样的问题，但现在它有效。
我所要做的只是添加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！
答案 12 :(得分：0)
我迟到了，但截至2017年5月11日，这是（令人难以置信的）still a problem。这是一个简单的解决方案，它也可以跨平台与线性渐变：
.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>
答案 13 :(得分：0)
这就是我的工作，它在所有地方都有效:)
.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;
}
答案 14 :(得分：-1)
您可以使用此标记使“固定”定位的元素在移动设备上正常工作：
List<Record> recordList = new ArrayList<>();
if (null != record.getEventName() and a few other conditions inside this section) {
// setting values of Record Class by extracting from the IncomingRecord.
recordList.add(the valid records which matching the condition);
}else{
return null;
}