0

我有这个 html5

 <body>
         <!--[if lt IE 7]>
             <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please         <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

         <!-- Add your site or application content here -->
         <div id="content">
             aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

我有这个CSS：

 /* ==========================================================================
    Author's custom styles
  ========================================================================== */

.content { 
    display:block;
    background:url (../img/boek.jpg);
    width: 100%;
    height: 100%;
    top: 25%;
    left: 25%;
    right: 25%;
    text-align: center;
    position: fixed;
}

但我根本看不到背景，当然也没有以页面为中心。

罗洛夫

4

1 回答 1

1

你有两个问题：

  1. 使用#选择器而不是.(class)，因为您已在 html 中将其设置为 an id。
  2. 摆脱url和论点之间的空间。

这应该有效：

.content {
     background-image: url('../img/boek.jpg');
}

以这个 jsfiddle为例。

如果您还没有，请花一些时间学习如何使用开发人员工具栏（Chrome 开发工具栏、Firebug 等）。它可以极大地帮助快速找到 CSS 问题的原因，并让您轻松发现来自您指定的 URL 的图像是否正确加载。

于 2013-06-08T10:33:08.930 回答