css-sprites | 易学教程

using an image sprite for a gallery

阅读更多关于 using an image sprite for a gallery

问题 Slow load time due to too many images and too large images (file size). I have already begun converting some PNG to JPG and was considering exploring the idea of changing the current image slider/gallery (series of 6 rotating JPG images) to a single sprite. I'm not sure if it's even possible or worth all the effort. I'm aware that the background images are the meat of the issue and I am already working on changing them to JPGs and and reducing their file size. The link is below, if any

background-position is removed on page load

阅读更多关于 background-position is removed on page load

问题 I have a HTML page that tries to display some icons from a sprite image. I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below, .locicon{ background-position: -61px -110px ; width: 20px; height: 20px; background: url(htsprite1.png) no-repeat; } Problem: However, when the page is loaded, the icons are not getting displayed. When inspecting on chrome and firefox, I can see the sprite image, and

When CSS sprites would be good to use and when not?

阅读更多关于 When CSS sprites would be good to use and when not?

问题 In what scenarios CSS sprites would be good to use and when not? Is it time saver or only server request saver? I think bandwidth use will be same because image is same like ong big image but it's in a parts? When and where use of css sprite is a time saving(in work) option ? For navigation it's good for rollover pre-loading effect but not good for images disabled people? What are other good usage which can save our time once and in future (if changes comes in design) both? Edit: Sprites is

Why not sprite larger images that are page content?

阅读更多关于 Why not sprite larger images that are page content?

问题 The typical rule of thumb when it comes to using CSS sprites for images is that you should only do it for smaller images (like icons) and that actual image content should always be represented through <img> elements. My question is: why? Aren't the advantages of spriting worthwhile for content images as well? One reason I have read is to enable the use of alt text, to be more syntactically correct and accessible to screen-readers. However, when that is a concern, couldn't you just as easily

Can't get CSS Sprite to work..what am I doing wrong?

阅读更多关于 Can't get CSS Sprite to work..what am I doing wrong?

问题 I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..! So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back: .sprite-welcom1 { background-position: 0 -30px; } .sprite-welcom3 { background-position: 0 -109px; } .sprite-3 { background-position: 0 -188px; } So here is the HTML I am testing on,

Generating CSS sprites for dynamic images

阅读更多关于 Generating CSS sprites for dynamic images

问题 I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay. If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these

Sprite height limitation for CSS images?

阅读更多关于 Sprite height limitation for CSS images?

问题 I'm making a sprite and its reaching about 4000px in height. Is there a general size for maximum sprite height that is used within the graphics design community? 回答1: Browsers will have to decompress (and keep in memory) the whole image even if you only use very few sprites in it, and even if most of the image is blank/white. For a desktop client you've only missed an occasion to be a good citizen by using too much memory (and browser are already sucking a lot of memory). For some mobile

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 twice on the background, where I show one part of the image in the top right and one part of the image

CSS background-position

阅读更多关于 CSS background-position

问题 Little question here, i have a sprite image that contain icons with normal and hover effects.. And this is the css i have for now.. .wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:block; overflow:hidden; height:24px; width:24px; } .wi-delete{background-position:0 0;} .wi-edit{background-position:-24px 0;} .wi-fullscreen{background-position:-48px 0;} .wi-imageedit{background-position:-72px 0;} .wi-download{background-position:-96px 0;} .wi-tags

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, when I try to adapt it to my needs (i.e. my sprite), I get this: http://codepen.io/anon/pen/rmwwMG