更新

Question

我使用的预装载器：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我把这个模态放在我的页面上：

<!-- Central Modal Medium Info -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <!--Content-->
        <div class="modal-content">
          <table style = "background-color:#FFFFFF;" width="100%" border = 0>
            <tr>
              <td>
                <br/>
                asdasd
                <br/><br/>
              </td>
            </tr>
          </table>

        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Central Modal Medium Info-->

但是在这样做之后，滚动时我页面上的背景图像似乎会出现这样的故障：

而我的标题似乎也受到了影响。这里是正常的标题，没有添加模态bootsrap及其预加载器：

但是当添加模态引导程序及其预加载器时，当您尝试滚动页面时，标题区域会缩小：

如您所见，标题中的白色区域减少。向上滚动时，白色区域会恢复到原来的大小，只有一点点。

我试着搞乱我的CSS，但似乎我并没有走得太远。

我过去使用的css将我的标题锁定在顶部：

.header_scroll_lock {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

如何解决此背景图像和标题故障？这有点可以解决另一个CSS吗？谢谢你们。

＆＃13;

.header_scroll_lock {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

#header_content {
  /*background-color: #e2e3e7;*/
  background-color: #FFFFFF;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}

.header_separator {
  padding-top: 8px;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <!-- HEADER MAIN TABLE
    ================================-->
  <div class="header_scroll_lock">
    <table id="header_content" width="100%" border=0>
      <tr>
        <!--IMAGE TD-->


        <!--NAME TD-->
        <td width="70%">
          <div id="header_name_container">
            sample header

          </div>
        </td>

        <!--HOME TD-->
        <td width="5%">
          <div id="header_link_container">
            <a href="welcome.php">home</a>
          </div>
        </td>

        <!--ABOUT TD-->
        <td width="5%">
          <div id="header_link_container">
            <a href="about.php">about</a>
          </div>
        </td>

        <!--CONTACT TD-->
        <td width="5%">
          <div id="header_link_container">
            <a href="contact.php">contact</a>
          </div>
        </td>

      </tr>
    </table>
  </div>
  <!--==============================-->

</body>

</html>





<!DOCTYPE html>
<html>

<head>
  <title>modal problem</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="./js/imagefix.js"></script>
</head>

<body>
  <!-- Central Modal Medium Info -->
  <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <!--Content-->
      <div class="modal-content">
        <center>

          <table style="background-color:#FFFFFF;" width="95%" border=0>
            <tr>
              <td>
                <br/>
                <center>

                  inside of the modal
                </center>
                <br/><br/>
              </td>
            </tr>
          </table>

        </center>
      </div>
      <!--/.Content-->
    </div>
  </div>
  <!-- Central Modal Medium Info-->






  <!--HEADER SEPARATOR
    ==================================-->
  <br/><br/>
  <div class="header_separator">
  </div>
  <!--==============================-->


  <table width="100%" style="border-spacing: 0;">
    <tr>
      <td style="background: url('https://s22.postimg.org/tr02tr1wx/wall_classroom2.jpg'); background-size:100% 100%; background-attachment: fixed; background-repeat:no-repeat; height:100%;">

        <br/><br/><br/><br/><br/><br/>
        <!--====================================== MAIN TABLE ======================================-->

        <!-- HEADER -->


        <center>
          <h1>sample header</h1>
        </center>


        <br/>



        <center>
          <table style="background-color:#FFFFFF;" width="30%" border=0>
            <tr>
              <td>
                <div id="success_announce_design">
                  <br/><br/>


                  <!-- BUTTONS-->
                  <center>
                    <table style="margin-top:10px;" width="95%" border=0>
                      <!--Add another and Delete-->
                      <tr>
                        <td>
                          <center>
                            <a href="a" data-toggle="modal" data-target="#delModal">delete announcement</a>
                          </center>
                        </td>
                      </tr>

                    </table>
                  </center>


                  <br/><br/>
                </div>
              </td>
            </tr>
          </table>
        </center>


        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


        <!--==================================== END MAIN TABLE ======================================-->
        <br/>
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

更新

背景图片故障只发生在firefox上..我尝试在chrome上运行它并没有发生故障。它也不会在片段和jsfiddle上发生（故障）。但是如你所见，标题栏受到了影响。

滚动

更新

0 个答案: