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

Solution to mysql prompt "got timeout reading communication packets"

Detailed explanation of two table copy statements: SELECT INTO and INSERT INTO SELECT (Differences between SQL database and Oracle database)

Blog

Detailed steps to delete environment variables in Linux

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

Solution to mysql prompt "got timeout reading communication packets"

HTML implements a fixed floating semi-transparent search box on mobile

A brief discussion on the correct posture of Tomcat memory configuration

Detailed explanation of two table copy statements: SELECT INTO and INSERT INTO SELECT (Differences between SQL database and Oracle database)

Detailed steps to delete environment variables in Linux

A brief discussion on how to set CSS position absolute relative to the parent element

Detailed explanation of how to monitor MySQL statements

Javascript basics about built-in objects

Detailed example of creating and deleting tables in MySQL

Detailed explanation of MySQL database paradigm

Recommend

Detailed analysis of when tomcat writes back the response datagram

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

A brief discussion on the problem of forgotten mysql password and login error

WeChat Mini Program Basic Tutorial: Use of Echart

Vue event's $event parameter = event value case

Vue implements verification code countdown button

Three ways to communicate between React components (simple and easy to use)

Linux uses lsof/extundelete tools to restore accidentally deleted files or directories

Summary of precautions when writing EDM in HTML (general precautions for sending emails)

Implementation of MySQL5.7 mysqldump backup and recovery

Building a KVM virtualization platform on CentOS7 (three ways)

React event binding details

Vue3 + TypeScript Development Summary

Mysql optimization techniques for querying dates based on time

Vue+express+Socket realizes chat function