Question

所以我遇到的问题是网页没有加载背景图片以下图像地址似乎没有加载，因此页面背景保持黑色，因此无法读取任何内容。

编辑：这是我的完整css代码。

    #intro {
   position: relative;
   padding-bottom: 102px;   
   min-height: 900px;
   width: 100%;
   background: #161415
   background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg");  no-repeat center center;
   background-size: cover !important;
    -webkit-background-size: cover !important;   
}

这就是我的index.html的样子。

<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>

   <!--- Basic Page Needs
   ================================================== -->
   <meta charset="utf-8">
    <title>Coming soon</title>
    <meta name="description" content="">
    <meta name="author" content="">

   <!-- Mobile Specific Metas
   ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
    ================================================== -->
   <link rel="stylesheet" href="http://example.com/new/css/default.css">
    <link rel="stylesheet" href="http://example.com/new/css/layout.css">
   <link rel="stylesheet" href="http://example.com/new/css/media-queries.css">    

   <!-- Script
   ================================================== -->
    <script src="http://example.com/new/js/modernizr.js"></script>

   <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="example.com/new/favicon.png" >

</head>

<body>

    <div id="preloader">      
      <div id="status">
         <img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
      </div>
   </div>

   <!-- Intro Section
   ================================================== -->
   <section id="intro">

    <header class="row">     

            <div id="logo" >
                <a href="#" >
                 <img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">                  
              </a>                  
            </div>

           <nav id="nav-wrap">

              <a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
               <a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>

              <ul id="nav" class="nav">
                 <li class="current"><a href="http://example.com" target="_blank">Home</a></li>
                 <li><a href="http://example.com/whyus.php" target="_blank">About</a></li>                   
              </ul> <!-- end #nav -->

           </nav> <!-- end #nav-wrap -->            

    </header> <!-- Header End -->       

    <div  id="main" class="row">

        <div class="twelve columns">

<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>

            <!-- Begin MailChimp Signup Form -->
             <div id="mc_embed_signup">
             </div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
<a href="http://cpanel.example.com/lostpassword.php">Lost your password?</a>

         </div> 

      </div> <!-- main end -->      

   </section> <!-- end intro section -->


   <!-- About Section
   ================================================== -->
   <section id="about">

      <div class="row section-header">

        <div class="twelve columns">    

            <div class="icon-wrap">
                <i class="fa fa-group"></i>
            </div>


         </div>

      </div> <!-- end section-header -->                

      <div class="row section-content">

            <div class="six columns">

          </div>

          <div class="six columns">

          </div>            

      </div> <!-- end section-content -->  

      <div class="row section-content">

            <div class="six columns">

          </div>

          <div class="six columns">

          </div>            

      </div> <!-- end section-content -->       

      <div id="call-to-action">        

           <div class="row section-ads">

              <div class="twelve columns">                      


                    <div class="action">
                </div>

               </div>

           </div> <!-- end section-ads -->                           

       </div> <!-- end call-to-action -->           

   </section> <!-- About Section End-->    


   <!-- Location Section
   ================================================== -->
    <section id="location">

        <div class="contacts">      

            <div class="row contact-details">                                

               <div class="columns">


               </div> 

               <div class="columns">


               </div>    

               <div class="columns end">


               </div>           

            </div> <!-- end contact-details -->       

        </div> <!-- end contacts -->


    </section> <!-- end location section -->

   <!-- footer
   ================================================== -->
   <footer>

      <div class="row">

         <div class="twelve columns">            

            <ul class="copyright">
               <li>&copy; Copyright 2016 Coming soon</li>

            </ul>

         </div>          

      </div>

      <div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>

   </footer> <!-- Footer End-->   

   <!-- Java Script
   ================================================== -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
   <script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>

    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
   <script src="http://example.com/new/js/gmaps.js"></script>
   <script src="http://example.com/new/js/waypoints.js"></script>
   <script src="http://example.com/new/js/jquery.countdown.js"></script>
   <script src="http://example.com/new/js/jquery.placeholder.js"></script>
   <script src="http://example.com/new/js/backstretch.js"></script>  
   <script src="http://example.com/new/js/init.js"></script>

</body>

</html>

Answer 1

将您的css更改为此，因为您的CSS无效（当您定义background-image时，您无法包含no-repeat。使用background: url() no-repeat;或添加background-repeat: no-repeat;）：

 #intro {
   position: relative;
   padding-bottom: 102px;   
   min-height: 900px;
   width: 100%;
   background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
   background-size: cover;

}

此外，没有必要在url语法中包含引号。我宁愿把它留下来。有关此内容的更多信息，请访问：Is quoting the value of url() really necessary?

背景图像未加载到外部页面上

1 个答案: