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
Recommend
Specific example of MySQL multi-table query
1. Use the SELECT clause to query multiple tables...
Detailed explanation of pipeline and valve in tomcat pipeline mode
Preface In a relatively complex large system, if ...
Decompression, installation, backup and restore of MySQL under Windows environment
The system environment is server2012 1. Download ...
Tutorial on installing and uninstalling python3 under Centos7
1. Install Python 3 1. Install dependency package...
Source code reveals why Vue2 this can directly obtain data and methods
Table of contents 1. Example: this can directly g...
Detailed explanation of three relationship examples of MySQL foreign keys
This article uses examples to describe the three ...
View the command to modify the MySQL table structure
Brief description The editor often encounters som...
vue+node+socket io realizes multi-person interaction and releases the entire process
1. Background 1. The front end uses vue + vuex + ...
React implements import and export of Excel files
Table of contents Presentation Layer Business Lay...
Solve the problem of invalid utf8 settings in mysql5.6
After the green version of mysql5.6 is decompress...
WebWorker encapsulates JavaScript sandbox details
Table of contents 1. Scenario 2. Implement IJavaS...
Differences between proxy_pass in two modules in nginx
1. The proxy_pass directive of the 1.ngx_stream_p...
Introduction to the functions and usage of value and name attributes in Html
1. The value used in the button refers to the text...
A brief discussion on MySQL count of rows
We are all familiar with the MySQL count() functi...
Using cursor loop to read temporary table in Mysql stored procedure
cursor A cursor is a method used to view or proce...