Question

我正在一个网站上工作，我试图使图像基本上像横幅一样显示在页面的整个顶部，但是我尝试使用英雄图像来进行此操作，但是其他建议也可以接受可能对我更好。我遇到的问题是，无论我做什么，图像都不会显示，如果我添加文本，文本只会显示图像的位置，但不存在图像。查看控制台，路径正确无误。我还在我的主要样式表中使用w3.css

这是我的html文件：

<!DOCTYPE HTML>
    <HEAD>
        <TITLE>Home</TITLE>
        <META name = "viewport" content = "width=device-width, initial-scale = 1">
        <link rel = "stylesheet" href = "../resources/w3.css">
    </HEAD>
    <STYLE>
        body,html {
            width: 100%;
            height: 100%;
        }
        .custom-background {
            width: 100%;
            background-color: darkgreen;
        }
        .hero-image {
            background-image: url("../images/banner.jpg");
            height: 20%;
            width: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

    </STYLE>
    <BODY>
        <a href = "home.html">
            <div clas = "hero-image"></div>
        </a>
        <div class = "w3-bar custom-background">
            <div class = "w3-bar-item w3-mobile"><a href = "home.html">Home</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "aboutus.html">About Us</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "salonservices.html">Salon Services</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "jobs.php">Apply Here</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "shopaveda.html">Shop Aveda</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "contact.php">Contact Us</a></div>
            <div class = "w3-bar-item w3-mobile"><a href = "policies.html">Policies</a></div>
        </div>
    </BODY>
</HTML>

我试图像导航栏一样使“横幅”显示在整个屏幕上。

英雄形象没有出现

0 个答案: