my css находится в assets/css/style.css, а мое изображение находится в assets/img/bg.png Но когда я пытаюсь связать фоновое изображение:
background: url(../img/bg.png);
вместо этого использует assets/css/../img/bg.png в качестве URL-адреса. Почему?
Html файл (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Файл Css (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
body{
background-image: url('../img/bg.png');
}
Я пробовал это в своем проекте, где мне нужно установить фоновое изображение div, поэтому я использовал это, и он сработает!
Поскольку вы предоставляете относительный путь к изображению, местоположение изображения просматривается из местоположения, в котором у вас есть файл css. Поэтому, если у вас есть изображение в другом месте в файле css, вы можете либо попытаться указать абсолютный URL (путь, начиная с корневой папки), либо указать относительный путь к файлу. В вашем случае, поскольку img и css находятся в ресурсах папки для перехода из местоположения файла css в файл img, вы можете использовать оператор "..", чтобы указать, что браузер должен переместить 1 папку назад, а затем следовать по пути, который у вас есть. после оператора "..". Это в основном то, как работает относительный путь, и вы можете использовать его для доступа к ресурсам в разных папках. Надеюсь, что это поможет.
Вы используете систему кэширования. Вы можете изменить исходный файл и очистить кеш, чтобы показывать обновления.
Вы используете относительный путь. Вы должны использовать абсолютный путь, url (/assets/css/style.css).