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 Example

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

Answer 1

尝试这样：

您将图像设置为使用类图标
稍后你设置了一个第二类.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;
}

Answer 2

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

SAMPLE

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

如何使背景使用精灵图像

2 个答案: