Discussion on image path issues in css (same package/different package)

In CSS files, sometimes you need to use background, that is, add a background image, which is generally used when making button styles.

Adding background images in CSS can be divided into the following types according to the relative position of the image and the CSS file:
1. In the same package: background: url(aaa.gif);
2. Different packages:
In this case, there are two ways to set it. One is to use an absolute path, that is, upload/2022/web/www.iteye.com, but it is generally not recommended and is not conducive to project migration; the other is to use a relative path. First, you need to find a root directory common to the image file and the css file, and then add the subdirectory of the image, for example:
CSS file location: WebRoot/test/css/a.css
Image file location: WebRoot/platform/resource/images/icons/a.gif
If you want to find the common root directory, you need to use "../". This path means the parent directory. If there are two parent directories, it is "../../". Then, according to this writing method, the background image css in a.css should be written like this:

Copy code

The code is as follows:

background:url(../../platform/resource/images/icons/a.gif)

Why?

First, we observe the location of these two files and find that the common root directory is WebRoot.
We first find the WebRoot at the location of a.css, so we have "../../" and then the path of the subdirectory of the spliced image is "platform/resource/images/icons/a.gif". Putting them together is the result above.

<<: Detailed explanation of HTML style tags and related CSS references

>>: Detailed explanation of common template commands in docker-compose.yml files

Data URI and MHTML complete solution for all browsers

Discussion on image path issues in css (same package/different package)

Data URI and MHTML complete solution for all browsers

MySQL joint index effective conditions and index invalid conditions

A brief discussion on how to use slots in Vue

Background gradient animation effect made by css3

JavaScript implements long image scrolling effect

Linux uses join -a1 to merge two files

Solution to slow network request in docker container

8 essential JavaScript code snippets for your project

Node.js adds, deletes, modifies and checks the actual combat record of MySQL database

JavaScript error handling try..catch...finally + covers throw+TypeError+RangeError

Recommend

Docker Modify Docker storage location Modify container image size limit operation

Implementation of Vue single file component

MySQL 5.7.21 decompression version installation Navicat database operation tool installation

Summary of 50+ Utility Functions in JavaScript

An Incomplete Guide to JavaScript Toolchain

Vue implements a complete process record of a single file component

Two box models in web pages (W3C box model, IE box model)

How to install and deploy MySQL 8.0 under CentOS8

Detailed explanation of HTML form elements (Part 1)

The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer

Full process record of Nginx reverse proxy configuration

Summary of Linux nc command

HTML table markup tutorial (41): width and height attributes of the table header WIDTH, HEIGHT

A brief discussion on the VUE uni-app development environment

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details