css-sprites

问题 I want to use CSS sprites on a web site instead of separate image files, for a large collection of small icons that are all the same size. How can I concatenate (tile) them into one big image using ImageMagick? 回答1: From the page you linked, 'montage' is the tool you want. It'll take a bunch of images and concatenate/tile them into a single output. Here's an example image I've made before using the tool: (source: davr.org) 回答2: convert works much better than montage. It arranges images

问题 I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with background: url(/images/imagepath.png) top right; However the problem is, I am loading the image from a sprite and when I use something like background: url(/web/images/imagepath.png) -215px -759px top right; the sprite doesnt seem to pick it from the right location. Some other part of the sprite is loaded. Is it possible to

问题 I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct. Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks. 回答1: About semantical correctness: When an image has semantical meaning, so it is considered to be content, use an IMG tag , without sprites,

问题 I have following CSS sprite. When I try to display the first icon, it works fine, but when I set zoom to 150%, I see also small part of the second icon. This problem is on Google Chrome and Internet Explorer, but not on Mozilla Firefox: JSfiddle div { width: 29px; height: 29px; background-image: url(http://i.imgur.com/O2Cp0nb.png); } <div></div> That's how it looks for me on 150% zoom: Update: Chris suggested that I need to put some space between icons. So my question is: why? And why it

问题 I'm trying to set up a sprite menu but it's always showing first slide of srpite, in all links. This is my CSS: #menu-social{float: right; width: 175px; margin-top: 5px; list-style-type: none;} #menu-social li{display: inline-block; margin-right: 8px;} #menu-social li a{display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;} #link-google-plus{width: 30px; background-position: 0 0;} #link-twitter{width: 21px; background-position-x: -30px; /*or background

问题 I'm trying to set up a sprite menu but it's always showing first slide of srpite, in all links. This is my CSS: #menu-social{float: right; width: 175px; margin-top: 5px; list-style-type: none;} #menu-social li{display: inline-block; margin-right: 8px;} #menu-social li a{display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;} #link-google-plus{width: 30px; background-position: 0 0;} #link-twitter{width: 21px; background-position-x: -30px; /*or background

问题 I have two reasons I want to use csssprites for submit buttons : I have dynamically created button, which in the future might be localized I want just 1 HTTP request even if I have 5 buttons on the page The problem is that I want to avoid javascript for buttons, and therefore I need to use an input field of type image . I can set the background image on this field just as i would for any csssprite. The problem is that I found I had to set the image source to an empty pixel or else I get a

问题 I try to animate a sprite with auto fullscreen size but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing) any idea to autosize sprite ? @-moz-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%;

问题 I am attempting to use sprites for the first time... It took a minute or two to wrap my head around it, but I got the basic implementation of it. However, I am attempting to use the sprite to replace which you can see a live example of here. The problem I am having is I have a footer set up like so: footer{ width: 100%; height: 11%; position: fixed bottom: 0px; } And each image occupies a percentage width of the foot. For example, .head{ width: 18% height: 100%; } So that, as the browser

问题 I have the following code <ul id ="menu"> <%foreach (var pckg in Model) { %> <li style = "text-align:center;width:60px;" class = "top-<%=pckg.Controller.ToLower() %>"> li-text </li> <%} %> </ul> and following is the sprite CSS .top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; } .top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; } .top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; } .top-pkg4{ background-position: -517px 0; width: 36px;