0

気泡を含むページの背景をデザインしています。1つのバブル画像を画面の多くの場所に配置したいと思います。HTMLファイルで次のコードを使用します。

<body>
<div class="bg">
       <img id="bubble" src="images/bubble.png" />
</div>

このバブル画像をいくつかの場所に配置する方法はありますか？

あなたが私を別の投稿に導くことができるか（私は何も見つかりませんでした）、または私に解決策を与えることができれば私はそれを感謝します。前もって感謝します。

注：バブルが既に配置されている単一のバックグラウンドファイルを使用することはできません。

4

3 に答える 3

3

吹き出しの背景画像を定義する CSS スタイルを使用し、吹き出しを表示するページ要素にそのスタイルを適用します。また、要素の配置に役立つスタイルを定義します。

.bubble {
  background-image:url('images/bubble.png');
}

.top {
  position: absolute;
  top: 0;
}

.bottom {
  position: absolute;
  bottom: 0;
}

<body>
<div class="bubble top">
       
</div>
<div class="bubble bottom">

<div>
</body>

必要な効果を得るのに役立つ背景プロパティが他にもいくつかあります。位置、リピート、サイズ、クリップ。

于 2012-05-08T05:25:53.470 に答える
2

CSSクラスを追加できます

.bg {
    background: transparent url(images/bubble.png) no-repeat;
}

次に、クラスを再利用する必要があります

于 2012-05-08T05:21:56.380 に答える
0

バブルを保持するコンテナが必要です

<div id="bubble1" class="bubbles"></div>
<div id="bubble2" class="bubbles"></div>
<div id="bubble3" class="bubbles"></div>

次に、.cssで

.bubbles{ 
  background: url(images/bubble.png);
  position: absolute;}

#bubble1{
  left: 10px;
  top: 10px;
}
#bubble2{
  left: 50px;
  top: 150px;
}
#bubble3{
  left: 80px;
  top: 180px;
}
于 2012-05-08T05:29:27.480 に答える