Let's start with our base reference: your CSS file is hosted at https://example.com/folder1/folder2/style.css. Every relative URL in this file gets resolved against this location to form a full absolute path. Here's how each case works, using your examples:

Breakdown of Each URL Type #

• Relative path (no leading slash): img/example1.png
  This path is tied directly to the folder where your CSS file lives (folder2). Just append the path to the CSS file's directory URL:
  Result: https://example.com/folder1/folder2/img/example1.png

• Root-relative path (starts with /): /img/example2.png
  A leading slash means the path starts at the very root of your domain. Simply add the path to your base domain:
  Result: https://example.com/img/example2.png

• Path with single ../: ../img/example3.png
  Each ../ tells the browser to move up one directory level from the CSS file's location. So we go from folder2 up to folder1, then add the rest of the path:
  Result: https://example.com/folder1/img/example3.png

• Path with multiple ../: ../../img/example4.png
  Two ../ segments mean we climb two directory levels: from folder2 → folder1 → the root of the domain. Then append the path:
  Result: https://example.com/img/example4.png

• Already absolute URL: https://example.com/folder1/folder2/example5.png
  If the URL already includes the full domain and path, there's no need to modify it—it's already a valid absolute path.
  Result: https://example.com/folder1/folder2/example5.png

Quick Cheat Sheet for Future Reference #

• No leading slash → relative to the CSS file's directory
• Leading slash → relative to the domain root
• ../ → move up one directory per instance
• Full domain URL → leave as-is

内容的提问来源于stack exchange，提问作者Gracie williams