Summary of CSS image Path Problems

Therefore, the image Path Problem in Css is summarized as follows:

 

1. Do not quote the path of the background image
Change background: url ("xxx.gif") to background: url(xxx.gif)
Some browsers may encounter errors when quotation marks are added.

 

2. The path of the background image is relative to the path of the current css page.

For example:
Has the following directory structure
| -- Images
| --Xxx.gif
| -- Css
| --Xx.css
| --Index.html
Code content
Index.html references the xx.css file. <Link rel = "stylesheet" href = "css/xx.css"/>
Xx.cssto introduce xxx.gif images, the format is: background: url (../images/xxx.gif)

 

3. We usually use the link Method to directly reference a CSS file to an HTML (or other activity document) file. We will find that sometimes our images cannot be displayed. In this case, check your CSS code to see if there is a problem with repeated settings, or if there is a problem with Image Positioning. If there are no problems, remove the duplicate and location attributes of the background and restore them to the default attribute. If the image still does not appear, it will only be the path problem we mentioned today! In general, we are used to setting the image path as follows:

Example Source Code:

Background-image: url(logo.jpg );
Background-image: url (../logo.jpg );
Background-image: URL (../images/logo.jpg );

For the first kind of situation, click url(logo.jpg )". Check whether the image is in the same directory as the CSS file. We strongly recommend against the second and third cases because our webpage files may exist in multi-level directories, the file locations in different directories are doomed to different relative paths. In this way, the problem is complicated. It is very likely that the picture is displayed normally in this file. If the first-level object is changed, the image will not be able to find the shadow.

There is one way to easily solve this problem. We may create a public file directory to store some public image files, JS scripts, CSS files, such as "common ", we can directly store the CSS file in this directory or the image file in this directory, if there are many image files, create a directory inside it to store the image file "common/images ". We can directly write url(logo.jpg) or URL (images/logo.jpg) in the CSS file to solve the above problem.