如何在CSS中使用多个地方的图像

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

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

有没有把这个泡沫图像分割成几个地方的方式？

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

注意：使用已有气泡的单个背景文件不是选项。

来源

2012-05-08 Engin Yapici

你可以使用JavaScript，但那不是任何东西非常重要的最佳解决方案。 – Teak

定义“几个地方”？他们是指定的地方吗？背景图片？恒定模式还是随机？我想我在问什么是你的查询的一般意图？ – xtraorange

他们不会随机安排，我会自己手动定义边距/位置。他们也不会有重复的模式 –

使用的泡沫定义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>

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

来源

2012-05-08 05:25:53

这比我其他的更有效一些，我会使用它。谢谢！ –

您可以添加CSS类

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

然后再用类需要

来源

2012-05-08 05:21:56 Craig

那么没有更好的方法吗？我正在寻找一种更有效的方式，但我想我最终会使用这个：/ –

，您将需要一个容器，将保留您的泡沫

<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-08 05:29:27 killebytes

如何在CSS中使用多个地方的图像

回答

相关问题