為什么背景圖像在外部 CSS 中不起作用，但在內部卻起作用？

Question

好吧，首先我是 HTML 和 CSS 的新手，所以希望你能理解我缺乏知識。 所以，當我嘗試通過外部 CSS 添加背景圖像時，我遇到了問題，但奇怪的是它在 HTML 存檔中工作。 在那之后，我在這里搜索這個問題，我發現了很多解決方案，但沒有一個有效，主要解釋了為什么會發生這個問題。 所以，我請求幫助，拜托。
如您所見，當我嘗試通過 CSS 加載時，我什至在路徑中注意了 add..，但它沒有用。

整個目錄組成如下：


    |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");
 }

Answer 1

任何外部 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 */

So, if your website's URL is http://my-website.com/ and you're inserting http://www.external-website.com/css/style.css in it, don't expect that relative URLs in外部 css 文件指向http://my-website.com/資源（在本例中為圖像）。

Answer 2

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

/.. 是文件夾，與 /images 相同

為什么背景圖像在外部 CSS 中不起作用，但在內部卻起作用？

問題描述

2 個解決方案

解決方案1
0 2020-07-09 19:54:13

解決方案2
0 2020-07-09 20:04:16

為什么背景圖像在外部 CSS 中不起作用，但在內部卻起作用？

問題描述

2 個解決方案

解決方案1 0 2020-07-09 19:54:13

解決方案2 0 2020-07-09 20:04:16

解決方案1
0 2020-07-09 19:54:13

解決方案2
0 2020-07-09 20:04:16