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
Markup language - specify CSS styles for text
Click here to return to the 123WORDPRESS.COM HTML ...
Detailed explanation of Linux kernel macro Container_Of
Table of contents 1. How are structures stored in...
Example of using docker compose to build a consul cluster environment
Basic concepts of consul Server mode and client m...
It is not recommended to copy the content in Word directly to the editor on the website.
<br />Question: Why is it not recommended to...
Professional and non-professional web design
First of all, the formation of web page style main...
Linux yum package management method
Introduction yum (Yellow dog Updater, Modified) i...
SpringBoot integrates Activiti7 implementation code
After the official release of Activiti7, it has f...
Detailed explanation of MySQL transaction processing usage and example code
MySQL transaction support is not bound to the MyS...
How to skip errors in mysql master-slave replication
1. Traditional binlog master-slave replication, s...
Docker and iptables and implementation of bridge mode network isolation and communication operations
Docker provides multiple networks such as bridge,...
Linux file systems explained: ext4 and beyond
Today I will take you through the history of ext4...
Why developers must understand database locks in detail
1.Lock? 1.1 What is a lock? The real meaning of a...
How to count the number of specific characters in a file in Linux
Counting the number of a string in a file is actu...
Linux command line quick tips: How to locate a file
We all have files stored on our computers -- dire...
About the implementation of JavaScript carousel
Today is another very practical case. Just hearin...