1

目前我有下面的 HTML 代码，你可以看到没有指定 doctype：

<html lang="en">
    <head>
        <title>Website</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <!--[if gt IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/plugins.min.js"></script>
        <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
    </head>
    <body>
        <div class="container">
            <div id="searchbar">
                <form action="#" method="POST">
                    <div class="input-append">
                        <input class="span2" id="appendedInputButton" type="text" />
                        <button class="btn" type="button">Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

与以下 style.css 文件混合：

@font-face{
    font-family: Comfortaa;
    src: url('Comfortaa.ttf');
}

body{
    background-color: #77d5fb;
    background-image: url('bottom_bg.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    font-family: Comfortaa;
}

#searchbar{
    width:700px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -350px;
}

拥有该代码可以很好地显示我的背景图像，但是当我添加<!DOCTYPE html>引导程序所需的 as 时，我的背景图像声明似乎被“忽略”并且只显示指定的背景颜色。

我做了一些测试，发现背景位置导致了这个问题。

但是，background-position: center bottom图像不会出现background-image: center，它会出现但位于页面顶部的中心，我需要它在底部。

我怎样才能下推那个背景图片？

4

2 回答 2

2

添加

html,body{min-height:100%}

到你的 CSS。

至于文档类型，使用这个

<!DOCTYPE HTML>

所以你的文档看起来有点像这个工作示例。试一试，您会看到图像以您希望的方式显示。

  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Title Here</title>
  <meta charset="utf-8">
  <style>
  html{
      min-height:100%;
  }
  body{
      min-height:100%;
      background-color: #77d5fb;
      background-image: url('bottom_bg.jpg');
      background-position: center bottom;
      background-repeat: no-repeat;
      font-family: Comfortaa;
  }
  #searchbar{
      width:700px;
      height:200px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-100px 0 0 -350px;
  }
  </style>
  </head>
  <body>
  <p id="searchbar">Just testing!</p>
  </body>
  </html>

享受！

于 2013-07-26T06:52:25.143 回答
1

您应该始终使用 a doctype，否则您将在称为 quirksmode 的可怕且不可预测的土地上发展，这不是您想要的。我建议你添加：

<!DOCTYPE html>

并尝试解决您的小 CSS 问题。

于 2013-07-26T06:48:48.527 回答