Question

我试图将背景应用于jumbotron。如果我使用内联样式但在使用外部样式表时不能正常工作。我已正确链接外部样式表，我可以更改其中的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%;

}

Answer 1

我想你的文件夹结构如下所示：

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

HTML文件中Images/文件夹的路径与homepage.css文件中的路径不同。您需要使用相对路径到达Images文件夹，该文件夹应该高一级。您可以使用..在CSS url()属性中的文件夹结构中上升一级。

CSS

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

Answer 2

一种可能的解决方法可能是您的文件目录配置不正确。

作为良好做法，请遵循以下：

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%;
}

应用于bootstrap Jumbotron的CSS可以内联工作，但不能在外部工作

2 个答案: