css-sprites

CSS Sprite generation in gradle build process?

由 試著忘記壹切 提交于 2019-12-07 06:11:03
问题 I recently read an article about Javascript, where Build Tools like Grunt and Ender were mentioned. It was briefly stated, that such tools are capable of generating sprite images from individually provided files and that these build tools can be integrated into the build process. Unfortunately my google searches didn't unveil more information on this. Does anybody here have experience on this topic and integration into gradle? Some web resources for further reading are highly welcome! Many

Should I use a sprite-like technique for thumbnails on my website?

由 隐身守侯 提交于 2019-12-07 05:04:41
问题 On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded. I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like: <span class=thumb1"></span> And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100

Is it possible to use repeating background images in sprites? [duplicate]

由 ℡╲_俬逩灬. 提交于 2019-12-07 03:38:36
问题 This question already has answers here : Closed 8 years ago . Possible Duplicate: CSS Sprites and repeating backgrounds Are there any tricks that makes it possible to use sprite images as repeatable backgrounds? 回答1: Yes you can but there are some limitations and it depends how the images are repeated. Here is how you would go about this depending on repeat direction: Repeat: Don't think this is possible. repeat-X: You would stack these vertically in your sprite sheet. You can only have one

Using CSS Sprites on anchor tags

由 牧云@^-^@ 提交于 2019-12-07 01:53:34
问题 I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like : <a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a> etc. So I replace with a sprite. I'm using <a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a> but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky. Are there better options ? (nested span, div

can a background image be negatively positioned to the bottom or right, or only a portion of a picture repeated?

由 别来无恙 提交于 2019-12-06 23:23:27
问题 I'm putting together a sprite and have two questions. Something I've always wondered whether possible is negatively positioning a background picture to the right or bottom. A negative position is bread and butter stuff on the left of an element or top but what about the right and bottom? If I have a 500px by 500px div can I then position the left edge of a background image to appear 5px in from the right using a negative value rahter than 495px to push it over? The second question is whether

iPod touch iOS6 - elements with large background images show up blank

由 孤街浪徒 提交于 2019-12-06 04:52:55
I've reproduced this on two separate iPod touch devices running iOS 6. iPhone does not seem to be affected, neither is iPad. I'm using a sprite file for images in my web application. I am now trying to provide retina support, so I have created a separate retina sprite file which is twice the dimensions of the low quality one. It seems like neither Chrome nor Safari like to display this. I'm doing the following: .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx; display: block } And in the body: <div class='img'/> The type of tag doesn't matter. The background

Z-index problem in IE7 with jQuery Superfish menu plugin

由 拈花ヽ惹草 提交于 2019-12-06 00:36:43
问题 I needed to modify jQuery Superfish menu plugin to accommodate using image for the menu. There are submenus under Om oss and Medieomtale. I used sprites images for this menu. It works fine with IE8, FF etc. However IE7 has a problem to show submenus. It shows the submenu but when I try to navigate in the submenu, it fades out. Editor's note A link in this question to www.okadadesign.no to demonstrate the issue was removed, as it is no longer accessible. 回答1: I fixed the z-index problem for

Optimal Layout Algorithm [duplicate]

由 那年仲夏 提交于 2019-12-05 18:05:08
This question already has an answer here: What algorithm can be used for packing rectangles of different sizes into the smallest rectangle possible in a fairly optimal way? 8 answers I'm implementing a CSS Sprites setup in my ASP.NET application based on this article.. http://weblogs.asp.net/zowens/archive/2008/03/05/css-sprite-for-asp-net.aspx In the section "Get the SPRITE already!" ... the author says... "The only real down side to this is that all your images are lined up vertically. I'm not quite sure that this matters, but most other generators have the ability to somehow line the images

Add custom CSS to sprites generated with Compass

由 元气小坏坏 提交于 2019-12-05 15:41:36
I have this code in my_images.scss file: $icon-layout:smart; $icon-sprite-dimensions: true; @import "icon/*.png"; @include all-icon-sprites; The output is something like this: .icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... { background: url('/../../media/img/icon-s00227a988a.png') no-repeat; } .icon-asterisk { background-position: -108px -18px; height: 18px; width: 18px; } .icon-camera { background-position: -54px -18px; height: 18px; width: 18px; } How can I change the code to include custom CSS in the output. I want to generate this: .icon-sprite, .icon-asterisk, .icon-camera,

CSS background sprite too large for iPhone

由 烈酒焚心 提交于 2019-12-05 13:36:32
I have a sprite sheet for my css backgrounds with a dimension of 2000x2000 pixels. Works fine in all desktop browsers except on Safari for iPhone where it simply doesn't render at all. Lowering the size to 1000x1000 makes it render perfectly. (Well except for that fact that I now miss three quarters of the sprite sheet). Are there any constraints when it comes to the dimension of background images? 2000x2000 isn't THAT huge. Trying to get around the work of redoing a lot of css-positioning. Also, I'm using a media query for the layout (max-width, not max-device-width). But I still use the same
订阅 css-sprites