tizen - 如何为所有html应用页面设置背景

时间:2014-04-02 12:56:26

标签: html css background-image tizen tizen-web-app

我有一个包含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,你可以看到第二页按钮之间第一页的按钮

img

1 个答案:

答案 0 :(得分:0)

<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>

您的页脚位于内容标记