Example Analysis of Picture path problem in css

This article mainly introduces the example analysis of the picture path problem in css, which is very detailed and has a certain reference value. Friends who are interested must finish it!

In CSS files, background is sometimes used, that is, adding a background picture, which is often used when doing button styles.

Background images in css can be classified into several types according to the relative position of the image and the css file:

1. Same package: background: url (aaa.gif)

two。 Different packages:

In this case, there are two methods that can be set, one is to use an absolute path, that is, https://cache.yisu.com/upload/information/20210311/298/7680.com, which is generally not recommended, which is not conducive to project migration, and the other is to use a relative path. First, you need to find a common root directory of the image file and the css file, and then add the image subdirectory, such as:

Css file location: WebRoot/test/css/a.css

Image file location: WebRoot/platform/resource/images/icons/a.gif

If you want to find a common root directory, you need to use the path ".. /", which means a higher-level directory. If it is a two-tier parent directory, it is ".. /... /" then, in this way, the background image css in a.css should be written as follows:

The code is as follows:

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

Why?

First, when we look at the location of the two files, we can see that the common root directory is WebRoot.

We first find WebRoot in the location of a.css, so we have ".. /... /" and then the path of the subdirectory of the stitching image is combined with "platform/resource/images/icons/a.gif".

The above is all the contents of the article "sample Analysis of Picture path problems in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!