Почему фоновое изображение не работает во внешнем CSS, а во внутреннем работает? - PullRequest
0 голосов
/ 09 июля 2020

ну, во-первых, я новичок ie в HTML и CSS, так что надеюсь, вы понимаете мою нехватку знаний. Итак, если честно, у меня возникают проблемы, когда я пытаюсь добавить фоновое изображение через внешний CSS, но, как ни странно, он работает в архиве HTML. После этого я искал здесь эту проблему и нашел много решений, но ни одно из них не сработало, и, главным образом, объяснило, почему эта проблема возникает. Итак, прошу помощи, пожалуйста. Как вы можете видеть, я даже наблюдал за добавлением .. в пути, когда я пытался загрузить с помощью CSS, но это не сработало.

Весь каталог составлен как показано ниже:


    |part1|
         |css|
             style.css
         |images|
             header_bg.png
             logo.png
         |js|
            there's nothing here till the current moment
         index.html 

- HTML код:

<!DOCTYPE html>
<html>
</head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">
    
    <style type="text/css">
        .container_banner{
            width: 100%;
            height: 557px;
            background-image: url("images/header_bg.png");
        }
    </style> 
</head>

<body>
    <div class="header">
        <div class="center">
            <img src="images/logo.png">
        </div><!-- close the div center-->
        
    </div><!-- close the header-->
    
    <div class="container_banner">
        <div class="center">
            
        </div><!--close the div center-->
    </div><!--close the container-banner-->
</body>
</html>

- Мой CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.center{
    width: 1280px;
    margin: 0 auto;
}

.header{
    width: 100%;
    height: 60px;
    background-color: #212343;
}
 .header img {
    margin: 19px;  
 }

 .container_banner{
    width: 1280px;
    height: 800px;
    background-image: url("..images/header_bg.png");
 }

Ответы [ 2 ]

0 голосов
/ 09 июля 2020
 .container_banner{
    width: 1280px;
    height: 800px;
    background-image: url("../images/header_bg.png");
 }

/ .. - это папка точно так же, как / images -

0 голосов
/ 09 июля 2020

Любой внешний файл таблицы стилей css будет искать изображения относительно своего собственного URL-адреса, если внутри него есть относительные URL-адреса. Пример:

http://www.external-website.com/css/style.css содержит:

background-image: url("images/header_bg.png"); /* This will reference http://www.external-website.com/css/images/header_bg.png */

Итак, если URL вашего веб-сайта http://my-website.com/ и вы вставляете http://www.external-website.com/css/style.css в нем, не ожидайте, что относительные URL-адреса в этом внешнем css файле указывают на http://my-website.com/ ресурсы (в данном случае изображения).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...