CSS list-style-image

 CSS list-style-image can replace ul li or ol li's original default bullets with pictures. In this way, the presentation of the items becomes quite rich, and you can easily design alternatives such as tick, arrow or cute graphics Symbols, formats that can display pictures include jpg, jpeg, png, gif, bmp... and other common graphic file formats. The list-style-image item replaces the position of the picture, usually controlled by list-style-position . All mainstream browsers support the list-style-image syntax item to replace the picture function.

CSS list-style-image syntax

list-style-image:url('The location of the image file to be displayed');

Place the location of the image file to be displayed in the url brackets in the syntax. It can be an image file on the same server or an external image file. If it is an image file in the root directory of the same website, you can use a simplified URL location , But if it is an external image file from a different server, the full image URL must be used, otherwise the image cannot be displayed and only the original bullets will be displayed.

CSS list-style-image example

<style type="text/css">
ul li {
    list-style-image:url('upload/20130930173146.gif');
}
</style>
<ul>
　<li>Test list style image A.</li >
　<li>Test list style image B.</li>
　<li>Test list style image C.</li>
</ul>

The output of the above example is

• Test list style image A.
• Test list style image B.
• Test list style image C.

CSS list-style-image parameter list

parameter	definition
url	Referencing drawings to replace the original bullets is also the main function of list-style-image.
none	No pictures are displayed, only the original bullets are displayed. This is the default value. Same meaning as not using list-style-image.
inherit	The rules inherited from the parent layer are only supported by IE9. The old version of IE does not support it and it is not recommended to use it.

If you don’t need graphic bullets, you only need graphic bullets, you can use: CSS list-style-type .

When using list-style-image, you need to pay attention to whether the quoted picture can be displayed correctly, especially when quoting an external picture, make sure that the picture file can be connected externally, so as not to happen that your computer looks okay, just change it The dilemma of not being able to see the picture files. The most important thing is that unauthorized pictures cannot be used for quoting pictures, and the world of the Internet also needs to respect each other.