css-sprites

CSS Sprites browser rendering

由 对着背影说爱祢 提交于 2019-11-29 12:31:57
问题 We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background? 回答1: on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states. You have to moderate your temptation towards

use CSS sprites for list (<li>) background image

由 僤鯓⒐⒋嵵緔 提交于 2019-11-29 10:39:13
问题 Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this: .sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } .sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; } <div class="sprite sprite-checkmark"></div> Is it possible to use sprites for the bullets of <li> elements? There are CSS properties called list-style-image, and list

How do CSS sprites speed up a web site?

由 烈酒焚心 提交于 2019-11-29 09:26:50
I'm trying to understand how CSS sprites improve performance on a site? Why is the downloading of several small images slower than the download of a single image holding the smaller images if the total size of the single image is the sum of the smaller images? It's important to understand why the overhead of an HTTP request has such an impact. In its simplest form, an HTTP request consists of opening a socket, sending the request on the open socket and reading the response. To open a socket, the client's TCP/IP stack sends a TCP SYN packet to the server. The server responds with a SYN-ACK, and

Border-radius bleeding

由 你说的曾经没有我的故事 提交于 2019-11-29 05:30:33
I want to give border-radius to a <nav> in which all the <a> have an image has background, but the image keeps going outside the border-radius. Why is that? To fix this in all browsers you should use: -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; I found the answer here Add: -webkit-background-clip: padding-box; To fix this in Webkit. I had a problem with a bootstrap panel border or background bleeding to a HTML header <h> element above the bootstrap panel . The <h> element has class="page-header" and is contained in a div element with class

CSS - using one background image with multiple images on it

由 喜你入骨 提交于 2019-11-29 02:49:59
问题 I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section. Is there any advantage to this? How can this be used? For example, for the following Stack Overflow sprite, how would I display just one of the images? 回答1: The technique is called CSS Sprites. Basically you use CSS's background

Maximum image dimensions in a browser/CSS spec?

由 ⅰ亾dé卋堺 提交于 2019-11-29 02:18:40
问题 I want to display a page containing about 6000 tiny image thumbnails (40x40 each). To avoid having to make 6000 HTTP requests, I am exploring CSS sprites, i.e. concatenating all these thumbnails into one long strip and using CSS to crop the required images out. Unfortunately, I have discovered that JPEG files cannot be larger than 65500 pixels in any one dimension. Wary of further limits in the web stack, I am wondering: are any of the following unable to cope with an image with dimensions of

Why not animated GIF instead of animated CSS sprites?

由 不问归期 提交于 2019-11-29 00:08:36
问题 In recent trends I've seen people animating CSS sprites using JavaScript instead of using animated GIFs? Ex: http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (in fact, Google used this technique in other Doodles too) https://everyme.com/ ('me' logo) and many more... Is that all just to show or experiment with technology or are there any benefits out of it. I m interested in knowing the benefits, if there. The reason I m asking is that I couldn't figure out as in both cases

Compass: generate Sprites, plus width / height on each images in the sprite

由 筅森魡賤 提交于 2019-11-28 16:49:23
问题 I'm using Compass (a CSS Framework) to generate sprite images. It work, but compass generate only a background-position for each image. Is it possible to get also the width and the height for each image in the sprite? This is my code: @import "ico/*.png"; @include all-ico-sprites; The generated code: .ico-sprite, .ico-bag-blue, .ico-bag-black { background: url('../images/ico-s78b1a1919b.png') no-repeat; } .ico-bag-blue { background-position: 0 0; } .ico-bag-black { background-position: 0

Customizing the output of Compass sprites

由 拈花ヽ惹草 提交于 2019-11-28 12:41:49
I have a top bar menu (that's based on Zurb's Foundation): This is the SCSS: .top-bar { .top-bar-section { ul { @import "menu-icons/*.png"; @include all-menu-icons-sprites; } } } Now, this does what expected, but the problem is that I want to style the a element inside each li elements (actually, I'd like to apply it to .top-bar.topbar-section.ul.li.a:before ). However, since the site is build in WordPress, and so the menu, I can only assign the class to the li element and I have no idea how to make the Compass's spriting work. I know, I could customize the way the menu is rendered by

css sprite with negative background positions not clear

由 放肆的年华 提交于 2019-11-28 09:15:21
问题 I am working on some existing code where they are using css sprites. There is big image and its been used for to display all the images. Its basically a Ul and li elements. The each li element uses this image and uses a background position. I understood the css sprites completly ,its for better performance. But only thing which is not clear is why the x and y positions start with negative margins. Most of the images in the sprites are getting retrived by using something like -540px -30px like
订阅 css-sprites