0

我正在为我的页面设计一个包含气泡的背景。我想把一张气泡图放到屏幕上的很多地方。我在我的 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 回答