css-sprites

问题 I'm trying to create a dynamic icon using css sprites. here's what I keep getting: So I actually have a couple of questions about what's going wrong: Why is the icon (the box with the cross) not overlapping the purple boxes? Why do the purple boxes have a 2px space between them? EDIT Here is a jsFiddle: http://jsfiddle.net/hWhUb/ here's the relavant css i'm using: .icon { position: relative; width: 87px; } .icon .icon-type { position: absolute; left: 0; } .icon .brigade, .icon .icon-type {

问题 So I am trying to animate my navigation links background which is Css sprite. this picture: http://img689.imageshack.us/img689/2996/menufc.png $(document).ready(function(){ $('nav a') // On mouse over, move the background on hover .mouseover(function(){ $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px';}, 500); }) // On mouse out, move the background back .mouseout(function(){ $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px';},

问题 I've followed a tutorial on scaling sprites http://tobyj.net/responsive-sprites/ - when I set the images to 100% they are fine but when I use a value of 35% in my media queries the sprite images are displaced. Any ideas why? My site is here http://edharrisondesign.com/pocketpictograms/ Here's my CSS: #icon-container { position: absolute; top: 50%; margin-top: -225px; left: 50%; width: 400px; margin-left: -200px; } .icon img{ padding-bottom: 150%; } /*Set the max-width to the width of your

问题 I generated a CSS Spritesheet with the help of a Texture packer and its looks like .pirateSlotSprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/pirateSlotSprite.png);} .backgroundps {width:800px; height:480px; background-position: -105px -304px} .balanceBlockps {width:122px; height:61px; background-position: -0px -0px} ...more classes for each frame... .lineControlps {width:113px; height:65px; background-position: -580px -0px}

问题 Given a sprite image, one with all the images in one file, I want to generate the CSS that would represent each of the characters. I have looked at a number of the sprite creation tools out there and they all assume that you have a directory of images that you want to combine into a sprite and at the same time generate the CSS. Does such a tool exist? I have a few tens of sprite images like this that I need to process. Doing it by hand is out of the question. Thanks! Cheers! http://imgur.com

问题 Is it possible to use three images in CSS sprite navigation? This may be like this My image http://img710.imageshack.us/img710/1429/navigx.jpg If its possible what will be the result? 回答1: You can use any amount of images in a sprite, just move the positioning around in your CSS: .sprite1 { background-image:url(../../upload/btn_continue_sprite.png); background-repeat:no-repeat; background-position: -10px 5px; } .sprite1:hover { background-image:url(../../upload/btn_continue_sprite.png);

问题 EDIT: Mozilla fixed the bug. This thread is dead. EDIT: This is a Mozilla bug. See this thread: https://bugzilla.mozilla.org/show_bug.cgi?id=501853 I have a sprite I use for my images here: http://www.trailbehind.com/site_media/images/sprite.png In FireFox 3.5, the sprite seems to get fetched every time I render an icon on my map, you can see the behavior in the Firebug Net Panel when you load this page and/or pan the map: http://www.trailbehind.com/node/1148091/ I had previously had similar

问题 The conditions: It's a movie website with approximately 1000 images of 15kb Approximately 70% of all images will be loaded on a page visit Images will have a long expiry date. I think I will chose CSS-sprites because most images will be loaded by the visitors any way. But the CSS-sprite of all images are 9MB and 15000x2000px. Even if I devide it into 3 sprites it's 3MB :S Maybe such big sprites will cause some problems? Will images be cached by the browser even if they are 3-9MB? Will the big

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . some days ago I saw a website where a written text had a background-image in. Is it already possible with CSS to get a background-image into a text? I do not want a background-image behind the text. I have no idea to achieve this. :( Thanks gago! http://img221.imageshack.us/img221/232/examplewf.png 回答1: @gago;

问题 These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite. I'm playing with this very simple sprite image: I've got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it. For my CSS, I have the following: #menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; } .sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px;