我有som问题，我在div上设置了背景图片，并且该div的位置是绝对的。问题是我的背景图像在重复，我已经尝试过 将背景图像设置为不重复，但不起作用。 [在此处输入图片描述] [1]
重复图片：https://i.stack.imgur.com/8v1Cw.png 问题出在移动设备上。
setTimeout(function () {
var sec3Cont = document.getElementById('sectionThreeContent');
sec3Cont.parentElement.style.height = sec3Cont.offsetHeight + 'px';
sec3Cont.parentElement.parentElement.style.height = sec3Cont.offsetHeight + 'px';
var sec4Cont = document.getElementById('sectionFourContainer');
sec4Cont.parentElement.style.height = sec4Cont.offsetHeight + 'px';
sec4Cont.parentElement.parentElement.style.height = sec4Cont.offsetHeight + 'px';
var sec5Cont = document.getElementById('sectionFiveConatiner');
sec5Cont.parentElement.style.height = sec5Cont.offsetHeight + 'px';
sec5Cont.parentElement.parentElement.style.height = sec5Cont.offsetHeight + 'px';
var sec6Cont = document.getElementById('sectionSixContainer');
sec6Cont.parentElement.style.height = sec6Cont.offsetHeight + 'px';
sec6Cont.parentElement.parentElement.style.height = sec6Cont.offsetHeight + 'px';
}, 1000);
$(function () {
var bgBlack = "url(/WicconDeisgn/bgblack.jpg)";
var bgGrey = "url(/WicconDeisgn/bggrey.jpg)";
function checkScroll() {
var positionAbsolute = true;
var scrollPos = $(window).scrollTop();
var secTwo = $("#sectionTwo").offset().top;
var secThree = $("#sectionThree").offset().top;
var secFour = $("#sectionFour").offset().top;
var secFive = $("#sectionFive").offset().top;
var secSix = $("#sectionSix").offset().top;
var obj3 = document.getElementById('sectionThree');
var screenDiff3 = obj3.offsetHeight - screen.availHeight;
var obj4 = document.getElementById('sectionFour');
var screenDiff4 = obj4.offsetHeight - screen.availHeight;
var obj5 = document.getElementById('sectionFive');
var screenDiff5 = obj5.offsetHeight - screen.availHeight;
if (scrollPos < secTwo) {
$(".child").css("position", "");
positionAbsolute = false;
}
if (scrollPos >= secTwo) {
$(".child").css("position", "absolute");
$("#sectionTwo").children(".parent").children(".navigationDesktop").children(".navbar").css("background-image", bgGrey);
positionAbsolute = true;
}
if (scrollPos >= (secThree + (screenDiff3))) {
$(".child").css("position", "");
$("#sectionThree").children(".parent").children(".navigationDesktop").children(".navbar").css("background-image", bgGrey);
positionAbsolute = false;
}
if (scrollPos >= secFour) {
$(".child").css("position", "absolute");
$("#sectionFour").children(".parent").children(".navigationDesktop").children(".navbar").css("background-image", bgBlack);
positionAbsolute = true;
}
if (scrollPos >= (secFive + screenDiff5)) {
$(".child").css("position", "");
$("#sectionFive").children(".parent").children(".navigationDesktop").children(".navbar").css("background-image", bgGrey);
positionAbsolute = false;
}
if (scrollPos >= secSix) {
$(".child").css("position", "absolute");
$("#sectionSix").children(".parent").children(".navigationDesktop").children(".navbar").css("background-image", bgBlack);
positionAbsolute = true;
}
requestAnimationFrame(checkScroll);
}
requestAnimationFrame(checkScroll);html, body {
height: 100%;
/*overflow: auto;*/
/*-webkit-overflow-scrolling: touch;*/
/*-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);*/
}
.fullpage {
height: 100%;
}
.section {
height: 100vh;
position: relative;
}
.parent {
position: absolute;
clip: rect(0, auto, auto, 0);
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.parent {
-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
}
.child {
position: fixed;
left: 0;
right: 0;
}
p span {
background-color: #ffffff;
font-family: 'Lato Semibold',sans-serif;
font-size: 3.125rem;
border: solid #ffffff;
box-shadow: 0px 6px 50px rgba(0,0,0,0.07);
-webkit-box-shadow: 0px 6px 50px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 6px 50px rgba(0,0,0,0.07);
}
#arrow_one, #arrow_two {
cursor: pointer;
}
.row-pt {
padding-top: 100px;
}
.overflow-text {
overflow-y: scroll;
}
#sec3Text {
margin:0;
}
#sectionFour{
/*overflow:hidden;*/
}
.center-row {
top: 30%;
left: 0;
right: 0;
bottom: 0;
position: relative;
}
.topBottom {
top: 0;
bottom: 0;
}
.container-bottom-0 {
bottom: 0;
}
.container-top-0 {
top: 0;
}
.min-h {
min-height: 50vw;
}
.square {
width: 15vw;
height: 15vw;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #ccc;
background-color: transparent;
transition: 0.3s linear;
transform: translateZ(0);
perspective: 500px;
background-size: cover;
border-radius: 50%;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
}
.square .area {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
position: absolute;
margin: auto;
transform: translateZ(3em);
transform-style: preserve-3d;
}
.square .area .plupp {
display: block;
float: left;
width: 10%;
height: 10%;
padding: 4%;
border: none;
outline: none;
transition: 0.2s ease-in-out;
border-radius: 3px;
-webkit-backface-visiblity: hidden;
transform: translateZ(0);
position: relative;
}
.square .area .plupp:hover {
background-color: rgba(0, 0, 0, .8);
transform: translateZ(1.5em);
}
.innerPlupp {
background-color: rgba(0, 0, 0, .4);
width: 25%;
height: 25%;
position: absolute;
transition: 0.2s ease-in-out;
}
.none {
visibility: hidden !important;
}
.hover-text-sec-three {
text-decoration: none !important;
}
.title_hover:hover {
text-shadow: 1px 1px #1c7ab1;
}
.mainTitle {
font-family: 'Lato Semibold',sans-serif;
font-size: 1.6rem;
}
.mainTitleTwo {
font-family: 'Lato Regular',sans-serif;
font-size: 2.1875rem;
}
.wiccon_descriptions {
font-family: 'Lato Medium',sans-serif;
font-size: 1.25rem;
opacity: 0.71 !important;
} <div class="section" id="sectionThree">
<div class="container-fluid bgBlack parent">
<div class="navigationDesktop">
@Html.Partial("NavigationDesktop")
</div>
<div class="container-fluid child container-bottom-0" id="sectionThreeContent">
@*style="background-color:red;"*@
<div class="container">
<div class="row h-100 align-items-center row-pt">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 order-xl-1 order-lg-1 order-md-1">
<img src="@ArticleImgSecThree" class="img-fluid" alt="" />
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<a href="@Umbraco.TypedContent(1377).Url" class="hover-text-sec-three">
<p class="text-dark"><span class="title_hover">@Model.Content.GetPropertyValue("titleSecThree")</span></p>
</a>
<a href="@Umbraco.TypedContent(1377).Url" class="hover-text-sec-three">
<p id="sec3Text" class="wiccon_descriptions text-dark title_hover"> @Model.Content.GetPropertyValue("articleTextSecThree")</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>