使用css3和jq完成3D翻书效果，为什么子元素会被父元素的背景图片遮挡？但如果父元素没有背景色、背景图片，或背景颜色为透明色，则不会有此bug。求帮助！
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻书效果</title>
<style>
* {padding:0;margin:0;}
/* 公共-布局 */
.book {width:1000px;height:600px;margin:0px auto;position:relative;
background:url('./翻书效果img/book.png') no-repeat 0 0;
background-size:100% 100%;
/* transform-style:preserve-3d; */
perspective:800px;
/* transform:rotateX(60deg); */
}
.page-box {width:480px;height:580px;position:absolute;
left:500px;top:10px;
background:url('./翻书效果img/right.png') no-repeat 0 0;
background-size:500px 580px;
}
.page-box .info-box {width:400px;line-height:40px;height:160px;
box-sizing:border-box;/*【阻止变形】？*/
background:rgb(204, 204, 204, 0.5);
position:absolute;left:50px;top:20px;
z-index:2;
}
.page-box img {width:400px;position:absolute;top:120px;left:50px;z-index:1;}
/* .page-box */
.page-box {transform-origin:left center;z-index:1;}
.page-first {transform:/*translateZ(1px)*/ rotateY(180deg);}
.page-box.open {animation:open 2s ease 0s forwards;}
.page-box.close {animation:close 2s ease 0s forwards;}
/* 左右按钮 */
.next,.prev {width:50px;height:60px;background:#333;position:absolute;top:50%;margin-top:-30px;
text-align:center;font:bold 30px/60px '微软雅黑';color:#f6f6f6;opacity:0.7;
z-index:100;
}
.next,.prev {cursor:pointer;}
.next:active ,.prev:active {opacity:1;}
.next {right:-50px;}
.prev {left:-50px;}
/* 动画 */
@keyframes open {
0%{transform:rotateY(0deg);}
100%{transform:rotateY(-180deg);}
}
@keyframes close {
0%{transform:rotateY(-180deg) translateZ(0) rotateX(0);}
100%{transform:rotateY(0deg) translateZ(0) rotateX(0);}
}
/* */
</style>
</head>
<body>
<div class="book">
<div class="page-box page-first">
<div class="info-box">
<!-- 标题 -->
<h4>page-info-1</h4>
<p>The world is very beauitful!</p>
</div>
<img src="./翻书效果img/1.png" alt="">
</div>
<div class="page-box" style="z-index:4;">
<div class="info-box">
<!-- 标题 -->
<h4>page-info-2</h4>
<p>The world is very beauitful!</p>
</div>
<img src="./翻书效果img/2.png" alt="">
</div>
<div class="page-box" style="z-index:3;">
<div class="info-box">
<!-- 标题 -->
<h4>page-info-3</h4>
<p>The world is very beauitful!</p>
</div>
<img src="./翻书效果img/3.png" alt="">
</div>
<div class="page-box" style="z-index:2;">
<div class="info-box">
<!-- 标题 -->
<h4>page-info-3</h4>
<p>The world is very beauitful!</p>
</div>
<img src="./翻书效果img/3.png" alt="">
</div>
<div class="page-box page-last">
<div class="info-box">
<!-- 标题 -->
<h4>page-info-4</h4>
<p>The world is very beauitful!</p>
</div>
<img src="./翻书效果img/4.png" alt="">
</div>
<div class="next">></div>
<div class="prev"><</div>
</div>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>
var index = 1;
$('.page-box.page-first').find('img').css({height:500,top:20}).end().find('.info-box').hide();
$('.next').click(function (){
if (index!==4){
$('.page-box').eq(index).attr('class','page-box open').delay(520).animate({
zIndex:8+index
},1).find('.info-box').delay(520).animate({opacity:0}).end().find('img').delay(520).animate({
height:500,top:20
},1);
index++;
}
})
$('.prev').click(function (){
if (index!==1){
index--;
$('.page-box').eq(index).attr('class','page-box close').delay(520).animate({
zIndex:8-index
},1).find('.info-box').delay(520).animate({opacity:1}).end().find('img').delay(520).animate({
height:400,top:120
},1);
}
})
</script>
</html>
