css-sprites

问题 Thank you in advance for any help you can give. I am implementing sprites for the first time and am looking to streamline my code. Below is my css and html. CSS div[class^='Rating'] { background:url('http://10.0.50.19/images/Ratings.png') no-repeat; width:68px; height:13px; display:block; } .Rating0_5 { background-position: 0px 0px; } .Rating1_0 { background-position: 0px -13px; } .Rating1_5 { background-position: 0px -27px; } .Rating2_0 { background-position: 0px -41px; } .Rating2_5 {

问题 I have a large number of images stored on a separate server that needs to be displayed on a single page as a mosaic of some sort where the individual elements may be shown or hidden dynamically. These images should be fetched, resized and then stitched together as a sprite, and used as background images on divs. Fetching and resizing is a non-issue at this point, as the biggest hurdle is understanding the append method, or rather how to add images to a set, in order to use said method.

问题 I want to use a login button set (courtesy of Komodo Media) for my ASP.NET MVC3 website and assign the icons to the corresponding buttons, but the button set is a single image: Aside from going in with an image editor and splitting the icons out into separate image files, is there a way to do it with code? I know that a similar thing is done with the stackoverflow markup buttons, but I don't know how to do the same thing programatically (not sure of the proper term either): What's the proper

问题 I know about css sprites.. Now i want some examples of css sprites.... How did you manage to get css sprites work? 回答1: I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps. .mySprite a { background: transparent url(/images

问题 I have an image built from multiple css sprites, as described in this question: css image building with sprites How would I use that so that I could apply a size on the top container that would dynamically re-size all the children? here is the working fidlle so far: http://jsfiddle.net/hWhUb/3/ here is the current html structure: <div class="icon"> <div class="brigade brigade-purple-left"> </div> <div class="brigade brigade-purple-middle"> </div> <div class="brigade brigade-purple-right"> <

问题 I have two css files: A main file (main.css) A specific page file (page5.css). My page.css contains main.css (@import url(main.css));) My main.css has this as one part of it that sets the height of the page #content { background:url(../images/image.png) no-repeat; width:154px; height:356px; clear:both; } This works fine for all the other pages, but at page 5, I need a little bit more height. How would I go about doing it? 回答1: You don't even need a separate CSS file necessarily. You can add

问题 SVG images aren’t bitmaps, so (unless I’m missing something) you can’t do spriting like you can with other images files used on web pages (see http://www.alistapart.com/articles/sprites). But is there an equivalent mechanism to display only part of an SVG image as a CSS background? E.g. imaginary syntax: div.my-special-svg-div { background-image: url(sprite-image.svg#one-shape-in-the-svg-file); } 回答1: You can use 'traditional' CSS sprite techniques to slice up SVG images with background

问题 There are two image sprite techniques. The "classic" version uses the background and the background-position css properties. (as it's described here http://www.alistapart.com/articles/sprites) The "second" version uses an image tag and its clip css property. ( http://css-tricks.com/css-sprites-with-inline-images/) My question is that are there advantages of using the "second" version over the "classic" version? thanks and best, Viktor 回答1: The difference comes mainly down to the semantics of

问题 I am working with CSS sprites and the jQuery plugin spritely. I have a Super Mario image and when rolled over, I'd like the animation to play. When, you move your mouse away from the Super Mario (which is a <div> element), I would like the animation to play in reverse back to the original place it started. Here is what I have so far: <!DOCTYPE html> <html> <head> <title>Mario Planet Spritely Nav</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

问题 I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it. I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a