html - 如何使背景使用精灵图像

Question

我有一个覆盖所有屏幕的大 div，我在该 div 上使用了背景图像，但是现在，我想让该图像成为精灵图像的一部分，因此我的 HTTP 请求更少。问题是，我不知道如何让 div 只使用精灵的一部分而不是显示整个图像，例如：

div{
    width: 100%;
    height: 100%;
    background: rgba(52, 52, 52, .5);
    position: fixed;
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
}

Jsfiddle 示例

我只需要使用你在精灵图像上几乎看不到的小网格，而不是整个图像，我还希望网格在整个 div 中重复。

Answer 1

Caramba 打败了我，所以我包含一个 JSFiddle 纯粹是为了展示它的另一种用途。

样本

HTML：

<ul id="nav">
    <li><a class="facebook" href="#"></a>Facebook</li>
    <li><a class="twitter" href="#"></a>Twitter</li>
    <li><a class="browsers" href="#"></a>Browsers</li>
</ul>

CSS：

#nav {
    width: 200px;
}
#nav li {
    list-style-type: none;
    font-size: 14px;
    font-family: "Courier", sans-serif;
    padding: 10px;
}
#nav li a {
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
    background-repeat: no-repeat;
    display: block;
}
#nav li a.facebook {
    background-position: 0px 0px;
    width: 30px;
    height: 30px;
}
#nav li a.twitter {
    background-position: -33px 0px;
    width: 30px;
    height: 30px;
}
#nav li a.browsers {
    background-position: 0px -40px;
    width: 65px;
    height: 17px;
}

Answer 2

试试这样：

1. 您将图像设置为使用类图标看不到的位置
2. 稍后，您设置了一个具有正确位置的第二类 .icon.facebook 以及您想要显示的精灵的 sice

http://jsfiddle.net/NMtX7/5/

 <span class="icon facebook"></span>
 <span class="icon twitter"></span>


.icon {
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
    background-position:3000px 3000px;
}
.icon.facebook {
    border:2px solid green; /* you don't need this*/
    margin:20px;            /* you don't need this*/
    background-position:0px 0px;
    width:30px;
    height:30px;
    display:inline-block;

}
.icon.twitter {
     border:2px solid orange;
    background-position:-32px 0px;
    width:30px;
    height:30px;
    display:inline-block;
}