通过嵌入 CSS 的类应用时背景图像不显示

问题描述 投票：0回答：1

我在使用带有嵌入式 CSS 的 CSS 类设置背景图像时遇到问题。这是我正在使用的 CSS 代码：

.test-background {
    background-image: url('/img/roads.jpg');
    background-size: cover;
}

这是我应用 .test-background 类的 HTML 代码：

<div class="row test-background">
    <div class="col-md-2"></div>
    <div class="col-md-8 d-flex justify-content-center align-items-center" style="height: 100vh;">
        <img src="img/friend/1.png" class="img-fluid" style="width: 90%;" alt="Center Image">
    </div>
    <div class="col-md-2"></div>
</div>

问题是当我应用 .test-background 类时，背景图像没有显示。但是，如果我直接将背景图像设置为内联样式，则效果很好：

<div class="row" style="background-image: url('img/roads.jpg'); background-size: cover;">
    <!-- Rest of the HTML content -->
</div>

我已经仔细检查了图像的文件路径，并确保它存在于正确的目录中。我的 CSS 或 HTML 代码中是否遗漏或做错了什么？

css background-image styling inline-styles
1个回答
0
投票

我检查了你的代码。 你的代码是完全正确的，我可以轻松地在 CSS 页面上设置 backgradle。 我想到的原因之一是您可能没有 

link
CSS 文件或 错误地将其链接到您的 HTML 页面。

 <link rel="stylesheet" href="style.css">

这是我添加到 html 页面的唯一代码，并且您的代码有效。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link css file -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="row test-background">
        <div class="col-md-2"></div>
        <div class="col-md-8 d-flex justify-content-center align-items-center" style="height: 100vh;">
            <img src="img/friend/1.png" class="img-fluid" style="width: 90%;" alt="Center Image">
        </div>
        <div class="col-md-2"></div>
    </div>
</body>

</html>

希望我的回答能够帮助解决您的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.