1

私はスプライトが初めてで、この特定のタスクが私を悩ませています - 誰かを助けてください。

現在、次のような 2 つの背景画像を使用しています。

body {
background-attachment: fixed;
background-image: url("images/bktopright.png"), url("images/bkbottomleft.png");
background-position: right top, left bottom;
background-repeat: no-repeat;
line-height: 1;
min-width: 1150px;
}

ページの読み込み時間を改善するために、1 つの画像、スプライトを使用したいと思います。これは、背景に同じ画像を 2 回使用したいという点でユニークだと思います。画像の一部をブラウザ ウィンドウの右上に表示し、画像の一部を左下に表示します。表示したい画像の両方の部分は、幅 600 ピクセル、高さ 400 ピクセルです。

新しい画像が幅 1720 ピクセル、高さ 1100 ピクセルで、「background.jpg」と呼ばれる場合、これを実現するためにコードをどのように調整すればよいでしょうか?

4

2 に答える 2

1

これが実際の例での答えです。

http://jsfiddle.net/ctLZY/

 <div class="bg" id="bg1"></div>
 <div class="bg" id="bg2"></div>​

CSS

.bg{
    background-image: url("someimage.png");
    background-repeat: no-repeat;
    position:fixed;
    width:100px;
    height:100px;
}
#bg1{
    background-position: -50px 0px;
    right:0px; top:0px;
}
#bg2{
    background-position: 50px 0px;
    left:0px; bottom:0px;
}​

詳細については、以下のリンクを参照してください。
Css3.info
Css-Tricks
これは私が見つけた方法です。これを処理するためのより良い方法があるかもしれません。

于 2012-05-24T16:24:14.353 に答える
1

代わりに、divs内に2 つ作成することもできますbody:
CSS のみほど単純ではありませんが、スプライトを使用できます。

HTML :

<body>
  <div id="bgOne"></div>
  <div id="bgTwo"></div>
</body>

CSS :

body {
  min-width: 1150px;
}

#bgOne, #bgTwo {
  position: fixed;
  height: 400px;
  width: 600px;
}

#bgOne {
  background: url('images/bktopright.png') no-repeat right top;
  right: 0;
  top: 0;
}

#bgTwo {
  background: url('images/bkbottomleft.png') no-repeat left bottom;
  left: 0;
  bottom: 0;
}
于 2012-05-23T22:26:44.060 に答える