it-swarm.com.ru

фон: исправлено, не повторять, не работает на мобильном телефоне

Я создаю веб-страницу, на которой я хочу, чтобы фоновое изображение масштабировалось по всему экрану, сохраняло соотношение сторон и фиксировалось (поэтому, если вы прокрутите страницу вниз, фоновое изображение останется на том же месте).

Я достиг этого в настольных браузерах с помощью 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;
}
26
user2874270

Я нашел отличное решение для фиксированных фонов на мобильных устройствах, не требующее 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 для -10. html корневой элемент по умолчанию z-index равен 0. Это значение должно быть наименьшим z-index, чтобы иметь его в качестве фона.

85
Vincent

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

у меня была проблема на моих мобильных 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 не принимает 'fixed', он возвращается к значению по умолчанию, которое принимает, scroll.

Это работало для меня на каждом устройстве. Надеюсь, это поможет кому-то еще.

4
Ylama

Я нашел, возможно, лучшее решение для параллакса эффекта, который работает на на всех устройствах .

Главное - установить все секции с 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>

1
Nebojsa Sapic

Нашел идеальное решение проблемы 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>

1
Mrinal Jain

Благодаря усилиям Винсента и работ Джои Хейса у меня есть эта 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()
1
Eggs

Насколько я помню, Safari background-attachment:fixed в IOS была известной ошибкой.

Вот еще несколько вариантов для вас:

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;
}
1
Christina

Я был занят, используя различные посты и методы в течение двух дней, пытаясь понять это. Я призываю любого НАЧАТЬ, взглянув на сообщение Яйца, и возиться с созданным им и другими авторами кодовым пером.

Это было единственное решение, которое мне помогло, и которое я нашел. Я рекомендую его ответ как решение/как минимум хорошую отправную точку для тех из нас, кто все еще занимается этой проблемой в наших собственных веб-приложениях.

У меня пока нет достаточной репутации, чтобы комментировать его пост, иначе я бы так и сделал. Я пока даже не могу голосовать за это, или я бы тоже так сделал.

Это фактический код, который я использовал:

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-адрес браузера. Затем он исчезнет после того, как браузер пересчитает центр изображения (то, что, как я предполагаю, происходило).

Поэтому я рекомендую сделать изображение вокруг нижнего колонтитула или верхнего колонтитула, как я сделал, и установить верхнее левое/правое или нижнее левое/правое для вашей позиции.

Таким образом, это работает для меня. Так что попробуйте, если вы читаете так далеко, и ничего еще не сработало. Хотя вы уже должны были попасть в исходное сообщение. 

Спасибо, Яйца, и другим товарищам, с которыми вы сотрудничали на вашем Codepen.

1
Willie

"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;
    }
}
1
Matthew C

У меня возникла та же проблема, но теперь она работает . Все, что мне нужно было сделать, это добавить 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! 

0
Sam Gallon

Это то, что я делаю, и это работает везде :) 

.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;
}
0
pjdux

Смотрите мой ответ на этот вопрос: Обнаружена поддержка фонового вложения: исправлено?

  • Функция определения касания сама по себе не работает для ноутбуков с сенсорными экранами, и код для определения касания, предоставляемого Кристиной, не работает на некоторых устройствах. 
  • Ответ Гектора будет работать, но анимация будет очень нестабильной, поэтому лучше будет заменить фиксированную прокруткой на устройствах, которые не поддерживают фиксированную.
  • К сожалению, Taylon не прав, что iOS 5+ поддерживает background-attachment: исправлено. Это не. Я не могу найти список устройств, которые не поддерживают фиксированные фоны. Вполне вероятно, что большинство мобильных телефонов и планшетов нет.
0
mattthew

Я думаю, что мобильные устройства не работают с фиксированными позициями. Вы должны попробовать с некоторым плагином js, например, skrollr.js (например). С этим видом плагина вы можете выбрать положение вашего div (или чего-либо еще) в зависимости от положения полосы прокрутки.

0
Héctor

Я опаздываю на вечеринку, но это (невероятно) все еще проблема по состоянию на 11.05.2017. Вот простое решение, которое также будет работать кросс-платформенный с линейными градиентами:

.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>

0
Tom

На мобильных устройствах поддерживается фиксированное позиционирование начиная с Android 2.2 и iOS 5.

Вам нужно использовать device-with viewport на 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> 

http://jsfiddle.net/talendil/oackpmv5/

0
Taylan Derinbay