Javascript turn.js动画书中的页面透明度不工作
我是Javascript和Jquery的新手，目前我正在按照杂志教程使用Jquery制作一本交互式书籍 在大多数情况下，这本书写得很好，但我遇到了一个小问题，但很烦人。你看，对于这个项目，我正在制作一本旧的皮革杂志，我希望书中的页面不均匀，磨损。因此，我希望每页都有一个透明的边缘，显示下面皮革封面的边缘，但我似乎无法使透明边缘正常工作 使用下面的示例代码，如果我打开书的第1页，“透明”磨损的边缘看起来是白色的，而不是显示皮革硬背。如果我转到第2页和第3页，两个磨损的页面看起来都像预期的那样透明，但是如果我将鼠标悬停在第3页的翻页上，第2页的边缘将变为白色，反之亦然 我尝试在CSS中添加身体、动画书、杂志和杂志的透明背景色，但同样的结果仍然适用。我能做什么 请帮助我，因为我已经在这方面做了很多年了，在我开始写我的书之前，这是我需要修复的最后一部分 编辑：如果有帮助的话，我也在使用第四版的turn.js 这是我的HTML、Javascript和CSS代码：Javascript turn.js动画书中的页面透明度不工作,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我是Javascript和Jquery的新手，目前我正在按照杂志教程使用Jquery制作一本交互式书籍 在大多数情况下，这本书写得很好，但我遇到了一个小问题，但很烦人。你看，对于这个项目，我正在制作一本旧的皮革杂志，我希望书中的页面不均匀，磨损。因此，我希望每页都有一个透明的边缘，显示下面皮革封面的边缘，但我似乎无法使透明边缘正常工作 使用下面的示例代码，如果我打开书的第1页，“透明”磨损的边缘看起来是白色的，而不是显示皮革硬背。如果我转到第2页和第3页，两个磨损的页面看起来都像预期的那样透明，
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/turn.js"></script>
<style type="text/css">
body{
background-color:transparent;
}
#magazine{
width:1002px; //dimensions to show magazine
height:773px;
background-color:transparent;
}
#magazine .turn-page{
background-color:transparent;
background-size:100% 100%;
}
#flipbook {
background-color: transparent;
}
</style>
</head>
<body>
<div id="flipbook">
<div class="hard" style="background-image:url(pages/cover.png);"> </div>
<div class="hard" style="background-image:url(pages/cover.png);"></div>
<div style="background-image:url(pages/oldpaperright.png);">Page 1</div>
<div style="background-image:url(pages/oldpaperleft.png);">Page 2</div>
<div style="background-image:url(pages/oldpaperright.png);">Page 3</div>
<div style="background-image:url(pages/oldpaperleft.png);">Page 4</div>
<div class="hard" style="background-image:url(pages/cover.png);"></div>
<div class="hard" style="background-image:url(pages/cover.png);"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 1002,
height: 773,
autoCenter: true
});
</script>
</body>
</html>
身体{
背景色：透明；
}
#杂志{
宽度：1002px；//显示刀库的尺寸
身高：773px；
背景色：透明；
}
#杂志，翻页{
背景色：透明；
背景大小：100%100%；
}
#动画书{
背景色：透明；
}
第1页
第2页
第3页
第4页
$（“#动画书”）。翻({
宽度：1002，
身高：773，
自动中心：真
});
#flipbook .page {
background: url(pages/oldpaperright.png);
/* Other CSS Rules */
}
#flipbook .odd {}
#flipbook .even {}
#flipbook .hard {}
#flipbook .page-wrapper {}