使用精灵在div的100％ [英] Using sprites within a div of 100%

问题描述

我试图第一次使用sprites ...花了一两分钟，我的头围绕它，但我有它的基本实现。但是，我尝试使用精灵替换

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%;
}

因此，随着浏览器窗口变大或变小， with it ...（注意：从1150像素或更大，然后其他媒体查询处理。）

So that, as the browser window is made larger or smaller, the images scale with it... (Note: From 1150 pixels or larger then other media queries handle.)

现在我想出了如何替换页脚中的所有图像一个单一的精灵。

Now I have figured out how to replace all the images in the footer with a single sprite.

像这样，只是为了确保我得到它：

Like so, just to make sure I do get it:

 /* html*/

  <div id="head-hover">
       <a href="#" class="logo_head_thumb"></a>
  </div>

 /*css */

 .moneda-logo, .logo_head_thumb, .Swix-logo-thumb, .scotiaMcleod, .POC-logo1,
 .alpine-canada-logo-thumb, .cowboy-logo, .Love, .maddy, .gray, .delsorbo, .bietz{
    background: url('https://s3.amazonaws.com/benjaminthomsen.images/sprites.png') no- repeat;
 }
.logo_head_thumb{
    background-position: 0 -210px ;
    width: 300px;
    height: 60px;
    padding-right: 100%;
    padding-bottom:16%;
}
#head-hover{
   float:left;
   height: 100%;
   width: 15.9%;
}

（需要稍微调整一点，我的尝试迄今为止在这里 ...最初

(A little tweaking still needed but more or less), but you can see my attempt thus far over here ... originally done with a footer width of 1920 pixles.

问题是，它缩小每个div的宽度，因为它是一个百分比也scale（宽度300像素变成200像素，例如），并且总sprite图像不缩放或适合在新的空间。

The problem is, as it scales down the width of each div, as it's a percentage also scales (div of width 300 pixels becomes 200 pixels, for example) and the total sprite image does not scale or fit in the new space.

有一些简单的方法，我可以有新的页脚栏

Is there some easy way that I can have the new footer bar with sprites act like the one that is currently on the live site?

无需调整Sprite .png图片的大小以及在媒体查询中每隔20次重写所有的CSS或30像素（因为这是目前唯一的方式，我看到可能）或者也许有一个jQuery脚本可以使用，或者我实际上不知道如何正确使用精灵。我真的想保存额外的14个HTTP请求，使用sprite会缓解，但我不在乎修改当前网站的用户界面。

Without having to resize the sprite .png image along with rewriting all of the CSS within media queries every 20 or 30 pixels (as this is currently the only way I see possible) or perhaps there is a jQuery script that can be utilized or am I actually not grasping how to properly use sprites at all. I would really like to save the extra 14 or so HTTP requests that using a sprite would alleviate, but I don't care to modify the user interface of the current site.

推荐答案

这里是一个使用inline-block的例子（它可以通过table / table-cell实现shorterer）：

Here is an example using inline-block (it could be shorterer achieved with table/table-cell):

ul , body{
  margin: 0;
  padding: 0;
}
img {width: 100%;}
ul {
  width: 100%;
  font-size: 0;}
ul:before {
  content: '';
  display: inline-block;
  padding-top: 5%;
  vertical-align: top;
}
li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-size: auto 100%;
  background: url(http://i.stack.imgur.com/2xDHJ.png);
}
li:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
}
li a {
  display: inline-block;
  font-size: 32px;
  font-size: 2rem;
  vertical-align: middle;
  line-height: 5vw;
  height: 5vw;
  width: 8vw;
  /* To show them for tst */
  color: turquoise;
  text-shadow: 0 0 0.5em lime;
}
#sp1 {
  width:9%;
  background-size: auto 100%;
}
#sp1:before {
  padding-top: 59%;
}
#sp2 {
  width: 15%;
  background-size: auto 100%;
  background-position: 10.5% 0;
}
#sp2:before {
  padding-top: 35%;
}
#sp3 {
  width:17%;
  background-size: auto 100%;
  background-position: 29% 0;
}
#sp3:before {
  padding-top: 31%;
}
#sp4 {
  width: 15%;
  background-size: auto 100%;
  background-position: 48% 0;
}
#sp4:before {
  padding-top: 35%;
}
#sp5 {
  width: 19%;
  background-size: auto 100%;
  background-position: 69% 0;
}
#sp5:before {
  padding-top: 28%;
}
#sp6 {
  width: 14%;
  background-size: auto 100%;
  background-position: 88% 0;
}
#sp6:before {
  padding-top: 38%;
}
#sp7 {
  width:11%;
  background-size: auto 100%;
  background-position: 100% 0;
}
#sp7:before {
  padding-top: 48%;
}

在这里看到和玩的结果:) - http://codepen.io/gc-nomade/pen/Hezro

See and play with result here :) - http://codepen.io/gc-nomade/pen/Hezro

这篇关于使用精灵在div的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！