Блог

Главная - Вопросы по программированию - Изображение героя не отображается, несмотря на то, что я (../image folder/imagename.jpg )

Изображение героя не отображается, несмотря на то, что я (../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: 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()">amp;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()">amp;#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>

Комментарии:

1. Если вы используете веб-сервер или локальный хост на своем компьютере. Вам не нужно ../images/graduate.jpg . Вместо этого просто используйте это images/graduate.jpg или /images/graduate.jpg

2. Пожалуйста, предоставьте следующую информацию: 1. Какова структура папок, где находится HTML-файл и где изображение героя? 2. Какой URL-адрес вы видите при открытии этой HTML-страницы? 3. Как вы запускаете страницу, локальный сервер / развернутый онлайн / просто просматриваете статическую страницу.

Ответ №1:

Конец строки 3: url(../images/graduate.jpg); , изменить на url(/images/graduate.jpg); .

Ответ №2:

Изначально для удаления линейного градиента используйте только URL-адрес изображения, чтобы убедиться, что градиент не скрывает изображение или что-то в этом роде.

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

и
фоновое изображение: url(http://clipart-library.com/images/di45bnqMT.jpg );

Это делается для того, чтобы убедиться, что проблема связана только с путем и ни с чем другим.

Если оба вышеперечисленных действия работают, попробуйте следующее:

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

Комментарии:

1. Привет, Випул, я не уверен, что ты подразумеваешь под файловой структурой? Я сохраняю весь файл локально. Что я сделал, так это создал 1 папку для всего css, 1 папку для всех изображений и 1 папку для всего html. все они сохраняются в одном каталоге папки. URL-адрес, который я вижу, является file:///C:/Users/Jude/Documents/Digital CV/home.html . Я просто запускаю страницу, просто нажав на папку html (Chrome html document) и обновляю ее каждый раз, когда вношу изменения в html и css в Notepad . Я внес предложенные изменения, но они по-прежнему безуспешны. Не могли бы вы предложить какой-либо другой способ, как я делаю?

Ответ №3:

Удалось решить эту проблему. Я должен был «div». в CSS :

 div.hero-image{ background-image:(..url/images/graduate.jpg)}
Метки: , ,