Question

我正在为我的页面设计一个背景，其中包括气泡。我想把一个气泡图像放到屏幕上的很多地方。我在HTML文件中使用以下代码：

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

有没有办法将这个气泡图像放到几个地方？

如果你可以指导我到另一个帖子（我找不到任何帖子）或者给我一个解决方案，我会很感激。提前谢谢。

注意：使用带有气泡的单个背景文件不是一种选择。

Answer 1

使用为泡泡定义background-image的CSS样式，并将样式应用于您想要有泡泡的任何页面元素。还定义样式以帮助position元素。

.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>

还有其他一些背景属性可以帮助您获得所需的效果;位置，重复，大小，剪辑。

Answer 2

您可以添加CSS类

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

然后重用该类是必需的

Answer 3

你需要一个容纳气泡的容器

<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;
}

如何在CSS中使用多个图像

3 个答案: