Параллакс Не работает должным образом: Джанго - PullRequest
0 голосов
/ 04 июля 2019

Я скачал шаблон: http://keenthemes.com/preview/megakit/

На странице индекса есть параллакс:

<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
        <div class="container g-text-center--xs g-padding-y-80--xs g-padding-y-125--sm">
            <p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--white-opacity g-letter-spacing--2 g-margin-b-50--xs">Testimonials</p>
            <div class="s-swiper js__swiper-testimonials">
                <!-- Swiper Wrapper -->
                <div class="swiper-wrapper g-margin-b-50--xs">
                    <div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
                        <div class="g-padding-x-20--xs g-padding-x-50--lg">
                            <div class="g-margin-b-40--xs">
                                <p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
                            </div>
                            <div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
                            <h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
                        </div>
                    </div>
                    <div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
                        <div class="g-padding-x-20--xs g-padding-x-50--lg">
                            <div class="g-margin-b-40--xs">
                                <p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
                            </div>
                            <div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
                            <h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
                        </div>
                    </div>
                    <div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
                        <div class="g-padding-x-20--xs g-padding-x-50--lg">
                            <div class="g-margin-b-40--xs">
                                <p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
                            </div>
                            <div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
                            <h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
                        </div>
                    </div>
                </div>
                <!-- End Swipper Wrapper -->

                <!-- Arrows -->
                <div class="g-font-size-22--xs g-color--white-opacity js__swiper-fraction"></div>
                <a href="javascript:void(0);" class="g-display-none--xs g-display-inline-block--sm s-swiper__arrow-v1--right s-icon s-icon--md s-icon--white-brd g-radius--circle ti-angle-right js__swiper-btn--next"></a>
                <a href="javascript:void(0);" class="g-display-none--xs g-display-inline-block--sm s-swiper__arrow-v1--left s-icon s-icon--md s-icon--white-brd g-radius--circle ti-angle-left js__swiper-btn--prev"></a>
                <!-- End Arrows -->
            </div>
        </div>
    </div>

Изображение Parallax в основном определяется свойствами в строке:

 <div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">

Теперь, чтобы использовать то же самое в django, я изменил URL изображения следующим образом:

<div class="js__parallax-window" style="background: url({% static 'img_events/1920x1080/04.jpg' %}) 50% 0 no-repeat fixed;" >

Единственная проблема, с которой параллакс не работает должным образом в этом случае, размер изображения параллаксадолжно быть только 50%, но это вызывает несоответствие в высоте и размещении отзывов и фонового изображения, тогда как тот же код работает в шаблоне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...