我有一个带有 2 个页面的 html 应用程序,它们都有页眉页脚和带有按钮的 div 内容。我尝试将背景图像设置为第一个“页面”div,并使 css 文件中的所有其他 div 透明。它工作正常,但在第二页我可以在滚动时看到第一页的按钮。如何更改此设置以使第一页的按钮在第二页不可见?
第一的:
<body>
<div data-role="page" id="one" style="display:block;text-align:center;background: url('1.png') no-repeat center center fixed; background-size: cover">
<div data-role="header" id="oneheader" data-position="fixed" style="border: 5;background: Transparent;">
<h2><font color="#000000">text</font></h2>
</div><!-- /header -->
<div data-role="content">
<p>text</p>
<p>
<a href="second.html" data-role="button" data-style="round" id="btn" style="border: 5; background: #FFFFFF;">text</a>
</p>
</div><!-- /content -->
<div data-role="footer" id="onefooter" data-position="fixed">
<h4>text</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
第二:
<body>
<div data-role="page" id="one" style="display:block; text-align:center">
<div data-role="header" id="oneheader" data-position="fixed">
<h1>text</h1>
</div><!-- /header -->
<div data-role="content" style="display:block;text-align:center">
<p><a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF">text</a></p>
</div>
<div data-role="footer" id="onefooter" data-position="fixed">
<h4>text</h4>
</div><!-- /footer -->
</div>
</body>
css 文件:
body {
}
#one {
background: Transparent;
/*background: #06CF7B;*/
color: #000000;
font-family:"Times New Roman", Times, serif;
}
#oneheader {
background: Transparent;
color: #000000;
font-family:"Times New Roman", Times, serif;
}
#onefooter {
background: Transparent;
color: #000000;
}
#btn {
width: 230px; height: 40px;
margin: 0 auto;
/*data-style: round;*/
border: #000000;
border-style: solid;
border-width: 5px;
font-family:"Times New Roman", Times, serif;
}
在 img 上,您可以在第二页的按钮之间看到第一页的按钮