如何解决Chome 背景附件:修复了错误背景图片不可见
我正在制作一个滑块。
在 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,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,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,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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。