1

異なるHTML要素に同じ背景画像を使用できるかどうかをお聞きしたいのですが。

つまり、私はHTMLコード（その一部）を持っています：

<div class="src">
 <form action="#">
  <input type="text" class="text" />
  <input type="submit" class="submit" />
 </form>
</div>


<div class="menu">
 <ul class="level1">
  <li class="test1"><a href="#">Test1</a></li>
  <li class="test2"><a href="#">Test2</a></li>
 </ul>
</div>

シンプルなCSS

.src {
 background: url(images.png) 0 -45px no-repeat;
}

.menu ul.level1 li {
 background: url(images.png) 0 0 no-repeat;
}

.menu ul.level1 li.test1 {
 background-position:-15px -120px;
}

.menu ul.level1 li.test2 {
 background-position: -50px -120px;
}

このテクニックは良いですか？占有するHTTPリクエストが少なくなりますか？

CSSで一般的な背景画像を記述し、さまざまなHTML要素に対してbackground-positionのみを使用する方法は？または不可能ですか？

意味：

.generic {
 background: url(images.png) no-repeat;
}

.src {
 background-position: 0 -45px;
}

.menu ul.level1 li {
 background-position: 0 0;
}

.menu ul.level1 li.test1 {
 background-position:-15px -120px;
}

.menu ul.level1 li.test2 {
 background-position: -50px -120px;
}

ありがとう

4

1 に答える 1

1

はい、これはまったく問題ありません。

次のように、それを使用する各要素の背景画像を宣言するだけです。

.element1, .element2, .element3 {
 background-image:url(image.png);
 background-repeat:no-repeat;
}

次に、行ったように要素ごとに背景位置を宣言します。

于 2012-07-30T08:50:31.330 に答える