0

画面全体をカバーする大きな 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 全体で繰り返す必要もあります。

4

2 に答える 2

0

このようにしてみてください：

  1. クラスアイコンで見えない位置に画像を設定します
  2. 後で、2番目のクラス .icon.facebook を正しい位置に設定し、表示したいスプライトのサイスを設定します

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;
}
于 2013-10-24T06:31:24.277 に答える
0

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;
}
于 2013-10-24T06:44:29.363 に答える