css-sprites | 易学教程

Under what circumstances would loading images individually with HTTP/2 be slower than loading all images at once with a sprite a la HTTP/1.1?

阅读更多关于 Under what circumstances would loading images individually with HTTP/2 be slower than loading all images at once with a sprite a la HTTP/1.1?

问题 HTTP/2 makes it possible to multiplex connections, eliminating the need for more than one connection to a server. Over a single connection, many individual images can be sent down to the client. This obviates the old image sprite pattern of combining many images into one and using CSS to cut it apart. I'm curious if sprites would still actually be faster in an HTTP/2 world. If so, under what circumstances? 回答1: Sprites, as you will know, are used to prevent multiple requests being queued, so

CSS sprite not appearing in Firefox, but displaying in Chrome

阅读更多关于 CSS sprite not appearing in Firefox, but displaying in Chrome

问题 I am struggling to make a CSS sprite appear in my HTML page, and I couldn't. Then I put the code on plunker to share the code to SO, and it worked! Then I understood that it doesn't work on Firefox, but works on Chrome. Please help me Source code: <!DOCTYPE html> <html> <head> <style type="text/css"> .outdoor { background-image: url(sprites.png); background-repeat: no-repeat; background-position: -14px -110px; width: 20px; height: 20px; } .parking{ background-image: url(sprites.png);

Responsive CSS sprites with background-image property

阅读更多关于 Responsive CSS sprites with background-image property

问题 I found very useful tool for creating the responsive sprite images. http://responsive-css.spritegen.com/ Unfortunately the sprites are generated as img tags and create own HTTP request. Is there any elegant way how to do responsive CSS sprites with background-image property? 回答1: Yes, use a data-url. The image-bits can be embededed directly in your stylesheet. You could also embed the data-url in the src property of an image tag. In a stylesheet, it looks like this: background-image:url(data

Sprite animation wobbly / jumping in IE11

阅读更多关于 Sprite animation wobbly / jumping in IE11

问题 I built a semi-transparent sprite png which can be found at https://www.srf.ch/static/srf-data/test_sprite.png It is a 17280px high and 910px wide png (30 * 576 = 17280) - everything seems correct. I now want to loop through each frame (it should be a map of slightly moving points) with CSS3 keyframes using background-position . I adapted an example from https://builtvisible.com/3-logical-alternatives-to-animated-gifs/ (see http://codepen.io/tombennet/pen/oxmaLd) I can reproduce that example,

CSS two background images using a sprite

阅读更多关于 CSS two background images using a sprite

问题 I'm new to sprites and this particular task is boggling me - please help someone. I currently use two background images like so: body { background-attachment: fixed; background-image: url("images/bktopright.png"), url("images/bkbottomleft.png"); background-position: right top, left bottom; background-repeat: no-repeat; line-height: 1; min-width: 1150px; } In order to improve page load time I'd now like to use one image, a sprite. I think this is unique in that I'd like to use the same image

iPod touch iOS6 - elements with large background images show up blank

阅读更多关于 iPod touch iOS6 - elements with large background images show up blank

问题 I've reproduced this on two separate iPod touch devices running iOS 6. iPhone does not seem to be affected, neither is iPad. I'm using a sprite file for images in my web application. I am now trying to provide retina support, so I have created a separate retina sprite file which is twice the dimensions of the low quality one. It seems like neither Chrome nor Safari like to display this. I'm doing the following: .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx;

Optimal Layout Algorithm [duplicate]

阅读更多关于 Optimal Layout Algorithm [duplicate]

问题 This question already has answers here : What algorithm can be used for packing rectangles of different sizes into the smallest rectangle possible in a fairly optimal way? (8 answers) Closed 3 years ago . I'm implementing a CSS Sprites setup in my ASP.NET application based on this article.. http://weblogs.asp.net/zowens/archive/2008/03/05/css-sprite-for-asp-net.aspx In the section "Get the SPRITE already!" ... the author says... "The only real down side to this is that all your images are

Background size with css with sprites

阅读更多关于 Background size with css with sprites

问题 I have a list and each <li> has an icon and a text. The image of icons is a sprite image, so I need to set the background-size of each li to have the size of an icon. How can I do this with CSS? 回答1: You can set the background image size in CSS3 like background-size: 32px 32px; but that is not really cross-browser compatible and I guess that is what your concern is. Unless the sprite is well spaced out and vertical, my recommendation would be to use a bit of extra markup. For example, use

CSS background sprite too large for iPhone

阅读更多关于 CSS background sprite too large for iPhone

问题 I have a sprite sheet for my css backgrounds with a dimension of 2000x2000 pixels. Works fine in all desktop browsers except on Safari for iPhone where it simply doesn't render at all. Lowering the size to 1000x1000 makes it render perfectly. (Well except for that fact that I now miss three quarters of the sprite sheet). Are there any constraints when it comes to the dimension of background images? 2000x2000 isn't THAT huge. Trying to get around the work of redoing a lot of css-positioning.

Get icon from single png image

阅读更多关于 Get icon from single png image

问题 I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css 回答1: That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image property and later they are mapped using CSS background-position property, so for example .icon1 { background-image: url('YOUR