html - Chome后台附件：修复了错误。背景图片不可见

Question

我正在制作一个滑块。

在 Chrome background-attachment:fixed 中没有按预期运行。第一个元素是正确的，但其余的根本没有显示。Microsoft Edge 也是如此。

在 Firefox 中背景是可见的，但不是固定的。

不知道我做错了什么。任何见解都会很棒！

"use strict";
(function () {
    document.onreadystatechange = function () {
        if (document.readyState === 'interactive') {
          var i = 0
          document.addEventListener('click', ()=> {
            var el_miked__slide__track = document.querySelector('.miked__slider__track').style.transform = "translateX(-"+ i * 20 +"%)";
            i >= 4 ? i= 0 : i++
          })
        }
    };
    
})();

.miked__slider {
  position: relative;
}

/* window */
.miked__slider__window {
  width: 100%;
  overflow: hidden;
}

/* track */
.miked__slider__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

/* slide */
.miked__slide {
  padding: 1.5%;
  width: 100%;
  height: 500px;
}

<div class="miked__slider alignwide">
    <div class="miked__slider__window">
        <div class="miked__slider__track"
            style="width: 500%; transform: translateX(0%); transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;">
          
            <div class="miked__slide" data-slide-index="0"
                style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg);background-position:35% 18%;background-size:auto;background-repeat:Repeat;background-attachment:fixed">

                <p class="has-white-color has-text-color">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

            </div>


            <div class="miked__slide" data-slide-index="1"
            style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg);background-position:35% 18%;background-size:auto;background-repeat:Repeat;background-attachment:fixed">

                <p class="has-white-color has-text-color">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

            </div>


            <div class="miked__slide" data-slide-index="2"style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg);background-position:35% 18%;background-size:auto;background-repeat:Repeat;background-attachment:fixed">

                <p class="has-white-color has-text-color">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

            </div>


            <div class="miked__slide" data-slide-index="3"style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg);background-position:35% 18%;background-size:auto;background-repeat:Repeat;background-attachment:fixed">

                <p class="has-white-color has-text-color">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

            </div>


            <div class="miked__slide" data-slide-index="4"style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg);background-position:35% 18%;background-size:auto;background-repeat:Repeat;background-attachment:fixed">

                <p class="has-white-color has-text-color">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>

            </div>
            
        </div>
    </div>
</div>

标签： htmlcssgoogle-chromewebkit