CSS background-size: cover + background-attachment: fixed clipping background images

Jest do tego poprawka jQuery: http://jsfiddle.net/QN9cH/1 / Wiem, że nie jest optymalny, ale przynajmniej działa :)

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

Odpowiedź Nicka Noordijka postawiła mnie na dobrej drodze, ale lubię unikać skryptów, które wykonują obliczenia za każdym razem, gdy wystąpi zdarzenie przewijania. Oto moja wersja, która wykonuje obliczenia tylko po załadowaniu strony lub zmianie rozmiaru ekranu:

Html:

<div class="fake-img"></div>

Css:

.fake-img {
    display: block;
    height: 280px;  /* set the height here */
    width: 100%;
    background-image: url('http://example.com/path/to/image.jpg');
    background-repeat: no-repeat;
    background-position: center 68px;
    background-size: auto 50%; /* make a "best guess" here as a default */
    background-attachment: fixed;
    position: relative;
}

JQuery:

$(window).on('resize load orientationchange', function(){
    responsive_calc();
});

var responsive_calc = function(){

    // get the viewport height
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    // get the element height
    var bannerHeight = $('.fake-img').height();

    // get the integer percentage value difference between them
    var bgHeightPercent = Math.ceil(bannerHeight/h*100);

    // set background-size height to match the element instead of the viewport
    $('.fake-img').css('background-size', 'auto ' + bgHeightPercent + '%');
}

Zauważ, że tak naprawdę działa tylko z obrazami "banerowymi" - używanie background-size: auto nn% nie ma tej samej przewagi background-size: cover w pracy bez względu na to, czy twój obraz ma nadmiar w w obu kierunkach.

background: url(<image>) center top no-repeat fixed;
background-size: auto <width size in %>;

Właściwość background-size: cover; rzeczywiście przycina obraz, aby wypełniał obszar i nie miał pustej przestrzeni.

Właściwość background-size: contain; określa, który wymiar jest większy i skaluje się zgodnie z tym. Więc jeśli masz blok 100px x 100px i obraz tła o wymiarach 200x150px, ustawienie rozmiaru tła spowoduje skalowanie obrazu do 100x75px. W tym scenariuszu jednak będziesz miał pustą przestrzeń, jeśli współczynnik proporcji elementu jest inny niż obraz.

Możesz również ręcznie kontrolować, która proporcja ma priorytet, zakładając, że znasz proporcje obrazu.

Więc jeśli wiesz, że twój obraz jest zawsze 100x200px, oznacza to, że szerokość jest zawsze Mały wymiar, a wysokość duży.

Teraz ustawienie background-size: 100% auto; zapewni, że nie otrzymasz pustej przestrzeni, ale skończysz z przycinaniem. Jeśli ustawisz go na background-size: auto 100%; zapewni to, że brak przycinania ma miejsce i wysokość nigdy nie będzie miała pustej przestrzeni (ale szerokość będzie).

Jeśli chcesz obcinać i wyśrodkować obraz, użyj background-position: 50%;.

Przykład efektu paralaksy dla elementów ułożonych osobno (nie dla elementów pełnoekranowych):

Html:

<div style="background-image: url('/path/to/image.jpg')">Content</div>

Css:

#element_to_scroll {
    background-repeat: no-repeat;
    background-size: cover; 
    background-position-x: center; 
    background-position-y: 0;   
}

Js:

$(window).scroll(function() {
    var realImageWidth = 1280;
    var realImageHeight = 1024;
    var viewportBottom = $(window).scrollTop() + $(window).height();
    $('#element_to_scroll').each(function(){
        var scrollAmountPx = realImageHeight/(realImageWidth/$(this).outerWidth())-$(this).outerHeight();
        var elementOffsetFromBottom = viewportBottom-$(this).offset().top;
        var scrollAreaHeight = $(this).outerHeight() + $(window).height();
        if(elementOffsetFromBottom>0 && elementOffsetFromBottom<scrollAreaHeight) {
            var backgroundPositionOffset = Math.ceil(scrollAmountPx/scrollAreaHeight*elementOffsetFromBottom);
            //$(this).css('background-position-y',"-"+backgroundPositionOffset+"px");
            $(this).clearQueue().animate({'background-position-y':"-"+backgroundPositionOffset+"px"},50);
        }
    });
});

Aktualizacja w lipcu 2018: jest teraz 1-liniowa poprawka dla tego problemu

Miałem ten sam problem, dopóki nie przeczytałem tego artykułu , który nauczył mnie, że mogę dodać tę linię do mojego CSS, aby to działało:

will-change: transform;

Teraz mój CSS wygląda tak:

.myClass{
    position: relative;
    background: hsla(300, 100%, 90%, 0.1);
    overflow: hidden;
    &::before {
        background-image: url(/img/bg.jpg);
        background-size: cover;
        background-size: cover !important;
        -webkit-background-size: cover !important;
        background-repeat: repeat repeat !important;
        background-attachment: scroll !important;//"fixed" is the desired effect, but mobile browsers find it too "expensive" and disabled it, so use "scroll"
        background-position: 30% 50%;
        @media(min-width: $screen-sm-min){
            background-attachment: fixed !important;
            background-position: 30% 20%;
            will-change: transform;
        }//768
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.1;
    }
}

Innym bardzo prostym rozwiązaniem jest użycie jednostek vw i vh (które, gdybyś nie wiedział, ma całkowicie akceptowalne wsparcie dla przeglądarki w większości przypadków). Na przykład, zamiast robić background-size: cover, robić background-size: auto 100vh.

Jeśli nie znasz vw i vh, są to jednostki viewport i odpowiadają szerokości i wysokości viewport. Wartości odpowiadają procentowi wysokości lub szerokości viewportu. Na przykład 50vw oznacza 50% szerokości widoku.

Dla nasze cele, możemy po prostu powiedzieć, że tło jest 100% wysokości viewport.

Tu są skrzypce.

Jeśli chcesz dostosować różne proporcje obrazu, możesz skorzystać zaspect-ratio @media rules .

Zrobiłem wersję z responsywnym obrazem tła.

.flexslider .slides > li {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#slider,
.alink {
  min-height: 300px
}
.alink {
  display: block
}

Http://jsfiddle.net/onigetoc/grpku1gk/