css-sprites | 易学教程

Do I still need to pad images in a CSS Sprite?

阅读更多关于 Do I still need to pad images in a CSS Sprite?

问题 In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another. I think this depends on the different types of browser zoom (best explained by Jeff). However, I haven't been able to see this behaviour in my tests. Is this only a problem with older browsers? (I havent been able to test with IE6 at the current time so I'm counting that as 'old'). Should I still worry about leaving space? Its kind of a

How do CSS sprites work?

阅读更多关于 How do CSS sprites work?

问题 I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this. What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them. I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated. Update: I

Why use a sprite sheet rather than individual images?

阅读更多关于 Why use a sprite sheet rather than individual images?

问题 One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: Cons for using big sprite sheet Need to load a large image to just display even one small image Need to write (or generate) a long stylesheet with a class for each image Cluttering CSS with lots of class definitions may impact performance If one image

how do i use css sprites

阅读更多关于 how do i use css sprites

问题 I have a sprite that I want to use defining a class to and not an id: I want to use the white one to show expansion option and black one to show expanded state. For non expanded state I have a class sprite-right and want to use sprite-expanded for expanded state. Can anyone guide me through this? I forgot pasting what I did...duh! sprite-right { overflow:hidden; width:16px; height:20px; cursor:pointer; background:transparent no-repeat 0 0; background-image:url('../images/arrows.gif'); } 回答1:

sprite image replacement via link

阅读更多关于 sprite image replacement via link

问题 I am looking to display a section of my sprite within a div by default, then have a text menu below the div that when different links are clicked, the section of the sprite that is displayed changes. Here is where I am so far and have gotten my sprites all to display with the following: INDEX <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <i

CSS sprites navigation and User with image disabled

阅读更多关于 CSS sprites navigation and User with image disabled

问题 I made a css menu with css sprites but the problem is with sprite we don't use inline image we use in background only so if images are disabled in browser then nothing will show . any solution for this ? For example : See this menu and turn off images : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html (it will not be seen if images are disabled in browser) this menu is against on this quote Ensure your website works with images disabled Creating a site that relies too heavily

Looking for a good Image Sprite generator tool [closed]

阅读更多关于 Looking for a good Image Sprite generator tool [closed]

问题 As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 7 years ago . I looking for a decent Image sprite generator. I tried http://spritegen.website-performance.org/ but it's not "smart" enough to handle

How to position an image sprite at the bottom of an element of unknown height

阅读更多关于 How to position an image sprite at the bottom of an element of unknown height

问题 I am using an image sprite that consisting of four "sub-images": four corners for a div element. The sprite is 40px by 40px. Each "sub-image" is 20px by 20px. Each corner's "sub-image is on the opposite corner of the sprite of where it would be on the dev element. For example, the top-left sub-image is at the bottom-right of the sprite. This div element is 440px wide and 100% tall. I've got the top corners down but how do I get the bottom corners? Is there a way to do this without creating a

CSS elements (with sprites) on iPhone/iPad not scaling correctly

阅读更多关于 CSS elements (with sprites) on iPhone/iPad not scaling correctly

问题 I have a list on my main page which each has a link. Each list item has a different height and width which act like blocks on the page. Inside each list item is a link to another area on my side. Wrapped around this list is a container div, with a header and footer like most sites. The ul also uses a CSS sprite for the images, so that the normal picture is only about half the height of the image, and the bottom are the other image sprites. For some reason the on an iphone/ipad are not scaling

rake assets:precompile bug with rails and compass and “*”

阅读更多关于 rake assets:precompile bug with rails and compass and “*”

问题 I use rails 4.2.0 and compass-rails (2.0.2) I have a css.scss file with @import "compass/utilities/sprites"; @import "icons/*.png"; @include all-icons-sprites(true); I have many image .png in app/assets/images/icons/XXX.png I want deploy my app in production, it's work but with no assets, so I start rake assets:precompile in production environement. An error occure: rake aborted! Sprockets::FileNotFound: couldn't find file 'icons/*.png' I try to remove assets files in cache, nothing change.