I have many li tags and want to show a small image inside of them. I use content:url('...png'), and should give each li an image URL. So The server requests increase, one request for each image. And we can't use something like background-position to reduce request here.
One of the solutions that I found is using CSS based images (base64).
You could give each li a unique id and then put a background on them that way. And you could use a sprite to make sure only one file is being downloaded.
Yea, and how to keep the background image on hover? On hover, the color cover the icon. Result. There will be a transition problem if I use another background tag on hover.
content:url('...png'), and should give eachlian image URL. So The server requests increase, one request for each image. And we can't use something likebackground-positionto reduce request here.One of the solutions that I found is using CSS based images (base64).
Is there any other ideas?
On hover, the color cover the icon. Result.
There will be a transition problem if I use another background tag on hover.