html - 背景图像在我的代码中不起作用的原因可能是什么

问题描述

我尝试将它应用到另一个网站，它在任何地方都可以工作，但在我的代码中，我不知道可能是什么问题，我检查了文件路径，它是正确的，我什至尝试了链接（就像在这个情况），无论我如何尝试应用它，它仍然不起作用，它不适用于这个项目。另外，可以使用百分比作为填充单位吗？

HTML 和 CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
}

header {
    display: flex;
    align-items: center;
    padding-right: 7%;
    padding-left: 10%;
    margin: auto;
    height: 13vh;
}

.logo-container {
    display: flex;
    align-items: center;
    flex: 2.7;
    }
    
    .logo {
        margin: 5px;
    }

 .nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: space-around;

}

nav {
flex: 1;
}

.nav-links a {
    text-decoration: none;
}

.nav-links > li {
    padding-right: 15%;
}

.wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
}

.slide {
    background-image: url('https://media3.giphy.com/media/1AgjJa5aX1vmIvx8Zr/giphy.gif');
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/CSS/style.css">
    <title>Elrond</title>
</head>
<body>
    <header>
            <div class="logo-container">
                <img src="/Images/elrond-egld-egld-logo.png" alt="elrond" style="height: 6.5vh;">
                <h3 class="logo">elrond</h3>
            </div>
            <nav>
                <ul class="nav-links">
                    <li class="nav-link"><a href="#">Technology</a></li>
                    <li class="nav-link"><a href="#">Team</a></li>
                    <li class="nav-link"><a href="#">Blog</a></li>
                    <li class="nav-link"><a href="#">Docs</a></li>
                    <li class="nav-link"><a href="#">Resources</a></li>
                </ul>   
            </nav>
    </header>

<main>

    <div class="wrapper">
        <div class="slide">
            <div class="inner">
                
            </div>
        </div>
    </div>

</main>
</body>
</html>

注意：忽略未加载的图像，专注于 .slide 类全屏 加载网站，因为我仍然没有使其响应。

标签： htmlcss

html - 背景图像在我的代码中不起作用的原因可能是什么

问题描述

解决方案

推荐阅读