在外部頁面上不加載背景圖像

-1

所以我遇到的問題是網頁不加載背景圖片以下圖像地址似乎沒有加載，所以頁面背景保持黑色，因爲它而沒有任何東西可以被讀取。在外部頁面上不加載背景圖像

編輯：這是我的完整的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>

來源

2016-09-26 coolmark1995

你使用CMS嗎？ – Adjit

我不明白你的HTML在HTML上的路徑和用於背景的CSS之間的關係在哪裏？如何相關？似乎很不清楚 – DaniP

只是FYI，當你定義背景圖像時，你不能包含無重複。或者使用background：url（）no-repeat或者添加背景重複：no-repeat –

你的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?

來源

2016-09-26 22:58:19

在外部頁面上不加載背景圖像

回答

相關問題