2015-12-17 56 views
0

只使用css3/html5,我试图让单独的和不同的背景图像并排排列,而不是彼此重叠。是否可以平铺多个不同的背景图像?

从本质上讲,我希望获得多个独立和不同的背景图像,以表现单个背景图像的平铺行为。

我也希望在不设置任何固定或特定位置的情况下实现此目的,每个简单的背景图像都会根据旁边的背景图像的大小进行调整,等等等等。

因此背景图像像平常一样平铺在元素/容器上,除了平铺中的每个单独背景图像都可以是唯一的。

任何想法?

+0

的[我可以使用CSS多背景图片?]可能的复制(http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) –

回答

0

foreach img,你想在你的“背景”中使用,创建一个div,然后使用css background-image属性在div的边框内显示图像。换句话说,不要把img标签放在html中,链接到你的CSS中的源代码。 没有定位,你将被限制为添加任何“前景”的内容与背景图片的divs

基于你的措辞你的问题的方式,这可能会最终是非常耗时和令人沮丧的。也许考虑一个不同的技术与你可以理解的代码?如果你从基础开始,完全弄懂,创作技巧,就会发现自己

+0

我了解代码,你误解了我的问题。道歉,因为我认为我过度描述。你在描述图层或将背景图像叠加在一起时,我只是想知道是否有办法让不同的背景图像尊重它们自己的物理尺寸,并且一个接一个地连续排列在一起(而不是简单地左中右) - 类似于当你(和我原来)描述的布局时常规(而不是背景)图像的行为。 – Guanto

+0

使用display:inline-block为div – user3558499

0

这里是我明白你的问题:

  • 我有几个图片文件
  • 我想显示他们一边并排
  • 我有一个DIV,我不希望(或不能)更改HTML我有

“使用CSS3,可以 我显示这些图像SID作为我的div的背景吗?“

如果这是你的问题,答案是否定的,不是现在。抱歉。

根据此标准规范, http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4 没有位置值将背景图像放置在“先前”或“浮动”之后。

在多个背景和背景上浆更多信息: http://www.css3.info/preview/multiple-backgrounds/ https://css-tricks.com/almanac/properties/b/background-size/

你可能会想看看positionning您的画廊,包括您的IMG元素作为绝对的一个div。如果将它放在div之前,它会出现在div的后面,并为每个图像文件创建一个img元素。

<div style="position:absolute;"> 
    <img src="image1.png"> 
    <img src="image2.png"> 
    <img src="image3.png"> 
</div> 
<div>the div to be backgrounded</div>