CSS應用於bootstrap Jumbotron內聯工作，但不是外部工作

我試圖將一個背景應用於一個jumbotron。如果我使用內聯樣式但不使用外部樣式表時，它工作正常。我已經正確連接了外部樣式表，並且可以更改其中的jumbotron的其他屬性，但不包括背景圖像。任何幫助，將不勝感激。由於CSS應用於bootstrap Jumbotron內聯工作，但不是外部工作

HTML與聯樣式：

 <link rel="stylesheet" href="CSS/bootstrap.min.css"> 
     <link rel="stylesheet" href="CSS/homepage.css"> 

     </head> 
    <body> 

     <div class="jumbotron jumbotron-fluid" style= 
      "background-image:url('Images/background.jpg'); background-size:100% 100%"> 
      <div class="container"> 
      <h1 class="display-3">Welcome.</h1> 
      <p class="lead">Text</p> 
      </div> 
      <hr class="m-t-2">  
     </div> 

     <div id="cardDiv"> 

     </div> 

    </body> 
</html>

CSS：（高度的作品，背景圖片犯規）

.jumbotron { 

    height: 400px; 
    background-image: url('Images/background.jpg'); 
    background-size: 100% 100%; 

}

來源

2017-02-14 RT5754

一個可能的修復可能是您的文件目錄配置不正確。

是良好實踐，遵循這樣的：

root 
| 
index.html 
<other html files> 
CSS Folder/ 
    | 
    <CSS files> 
Images Folder/ 
    | 
    <image files>

至於解決：試試這個：

.jumbotron { 
height: 400px; 
background-image: url('../Images/background.jpg'); 
background-size: 100% 100%; 
}

來源

2017-02-14 19:48:08 TheDarkKnight

我想象你的文件夾結構看起來像下面這樣：

- index.html 
- CSS/ 
    -- homepage.css 
    -- bootstrap.min.css 
- Images/ 
    -- background.jpg

通往來自HTML文件的文件夾將與homepage.css文件中的文件夾不同。您需要使用相對路徑才能訪問Images文件夾，該文件夾應該高一級。您可以使用..在CSS url()屬性中的文件夾結構中上升一個級別。

CSS

.jumbotron { 
    height: 400px; 
    background-image: url('../Images/background.jpg'); 
    background-size: 100% 100%; 
}

來源

2017-02-14 19:45:17

這個工程thatnks。只是將圖像移動到不同的目錄 – RT5754

CSS應用於bootstrap Jumbotron內聯工作，但不是外部工作

回答

相關問題