如何阻止jQuery在嵌套div上淡入淡出？

Question

var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});

p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {background-size:cover;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage" style="width: 600px;height: 400px;">
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>
</div>

我正在尝试创建一个背景图像旋转器，它可以改变图像并在每个图像之间淡入淡出。我几乎得到了它，但在我使用它的网站上，有一个嵌套的图像和文本，它也在褪色。我只想让它淡化背景图像，而不是任何嵌套的div。

我在这里创建了一个带有嵌套div(以及带文本的段落标记(的示例。

https://jsfiddle.net/bobthegoat2001/3hrgua82/6/

有人知道我该怎么解决吗？任何帮助都会很棒。谢谢

<p style="display:none">I guess Stack Overflow wanted some code, so I just put some random here. The jsfiddle will make more since.</p>

Answer 1

您可以使用绝对位置，然后将z-index设置为-1，但您需要将嵌套的div移出您的div#dvImage

var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});

p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {position:absolute; z-index:-1;width:600px; height:400px; background-size:cover;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage"></div>
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>