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内联工作，但不是外部工作

回答

相关问题