Html 英雄图像未显示，尽管I（../image folder/imagename.jpg）_Html_Css

Html 英雄图像未显示，尽管I（../image folder/imagename.jpg）

html css

Html 英雄图像未显示，尽管I（../image folder/imagename.jpg）,html,css,Html,Css,需要帮助我试图把一个英雄形象放到我的背景主页上，但我失败了。图像与css位于一个单独的文件夹中，因此我使用了（../）。它仍然不成功。我是初学者 hero-image{ background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/graduate.jpg); background-position: center; background-repeat:

需要帮助

我试图把一个英雄形象放到我的背景主页上，但我失败了。图像与css位于一个单独的文件夹中，因此我使用了（../）。它仍然不成功。我是初学者

hero-image{

    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/graduate.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}   

<!Doctype>
<html>
    <head>
    
    <link rel="stylesheet"href="css/home.css"></link>
    <title>Home</title> 
    
    </head>
    <body>
        <div id = "hamburger" class = "sidenav">
            <a href = "javascript:void(0)" class="closebtn" onclick="closenav()">&times;</a>
            <a href="home.html">Home</a>
            <a href="my_story.html">My Story</a>
            <a href="career.html">Career</a>
            <a href="education.html">Education</a>
            <a href="Portfolio.html">Portfolio</a>
            <a href="contact.html">Contact</a>
            <!<img alt="icon"src="images/icon.png">
        </div>  
            
        <span style="font-size:30px; Cursor:pointer" onclick="opennav()">&#9776;</span>     
        
        <script>
            function opennav(){doctype.getElementById("hamburger").style.display="block"; 
            function closenav(){doctype.getElementById("hamburger").style.display="none";
        </script>
        
        <div class="hero-image">
            <div class="hero-text">
                <h1>The Mindful Hustle</h1>
            </div>
        </div>  
        
    </body> 
</html>

英雄形象{ 背景图像：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（../images/grade.jpg）；背景位置：中心；背景重复：无重复；背景尺寸：封面；位置：相对位置； } 家 ☰ 函数opennav（）{doctype.getElementById（“汉堡”）.style.display=“block”；函数closenav（）{doctype.getElementById（“汉堡”）.style.display=“无”；专注的忙碌

第3行末尾：

url（../images/grade.jpg）；

更改为

url（/images/grade.jpg）；

最初删除线性渐变仅使用图像url，以确保渐变不会隐藏图像或其他内容

background-image:url(../images/graduate.jpg);

及背景图片：url（）

这是为了确保问题只与路径有关，而与其他无关

如果以上两种方法都有效，请尝试以下方法：

background-image:url(../images/graduate.jpg),
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

设法解决了。我不得不在CSS上“div”：

div.hero-image{ background-image:(..url/images/graduate.jpg)}

如果您在计算机上使用Web服务器或本地主机。您不需要../images/graduate.jpg。只需使用此images/graduate.jpg或/images/graduate.jpg，请提供以下信息：1.文件夹结构是什么，html文件在哪里，英雄图像在哪里？2.打开此html页面时，您看到的url是什么d？3.如何启动页面，本地服务器/在线部署/只是查看静态页面。嗨，Vipul，我不确定你所说的文件结构是什么意思？我正在本地保存所有文件。我所做的是为所有css创建一个文件夹，为所有图像创建一个文件夹，为所有html创建一个文件夹。它们都保存在同一文件夹目录中。URL我明白了file:///C:/Users/Jude/Documents/Digital%20CV/home.html 。我只需单击html文件夹（Chrome html文档）即可启动页面，每次在记事本++上更改html和css时都会刷新。我进行了建议的更改，但仍然不成功。您是否建议我采用其他方法？