如何把四个图像2x2放在其他图像上作为背景，CSS？

我试着把第4幅图像（相同的尺寸）放在BG定义的第5幅图像上。如何把四个图像2x2放在其他图像上作为背景，CSS？

这是怎么看起来像现在：

enter image description here

如果height固定它工作正常，但在我的情况下，height可能会改变，我得到这个行为：

enter image description here

这个问题并不令我感到意外，因为我使用%而不是px。

当width变化，风格left: 13%改变

非常重要的！我只能使用“％”

即使高度发生变化，我如何实现第一张图片张贴？

下面是相关代码：

<!-- BG image --> 
<div style="position: relative; right: 0; top: 0; height:100%"> 
    <img src="img/groups/pic-shade.png" style=" 
          position: relative; 
          top: 0%; 
          right: 0%; 
          height: 17.6%; 
          "> 
    <!-- left-top image --> 
    <img 
      style="position: absolute; 
        height: 42.25%; 
        top: 0%; 
        left: 0%;" src="img/group_6.png"> 
<!-- right-top image --> 
    <img 
      style="position: absolute; 
        height: 42.25%; 
        top: 0%; 
        left: 13%;" src="img/group_6.png"> 

<!-- left-bottom image --> 
    <img 
      style="position: absolute; 
        height: 42.25%; 
        bottom: 0%; 
        left: 0%;" src="img/group_6.png"> 

<!-- right-bottom image --> 
    <img 
      style="position: absolute; 
        height: 42.25%; 
        bottom: 0%; 
        left: 13%;" src="img/group_6.png"> 
    </div>

[编辑]

我试图把right: 0%，而不是left: 13%但它并不能帮助我，因为BG div有较大的宽度，则BG图像：

这里是选择的根区DIV：

enter image description here

来源

2014-05-17 snaggs

DEMO

不要使用绝对位置 - 它打破元件之间的流动和关系，这意味着它们不能显示对彼此的宽度高度的变化的任何响应。

而是使用表格技术 - 检查演示。

HTML

<div class="bg-image-wrapper"> 
    <div class="table"> 
     <div class="row"> 
      <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div> 
      <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div> 
      <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div> 
     </div> 
    </div> 
</div>

CSS

img{ 
    display:block; 
} 
.table{ 
    display: table; 
} 
.row{ 
    display: table-rwo; 
} 
.cell{ 
    display:table-cell; 
} 
.bg-image-wrapper{ 
    display: inline-block; 
    background: url(http://placehold.it/200x200); 
    border-radius: 10px; 
    overflow: hidden; 
}

来源

2014-05-17 19:57:42

是的，但我有5图像BG。我是否需要使用'bg-image-wrapper'作为'absolute'？ – snaggs

你想要bg图像覆盖更多区域，然后图像？ –

尽可能地避免位置的绝对位置，它不是一个很好的练习，可以在'position：absolute;'上创建布局结构。 –

-1

<!-- BG image --> 
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%"> 

<table> 
<tr> 
<td> 
        <img style="height: 100%;width: 100%;src="img/group_6.png"> 
</td> 
<td> 
        <img style="height: 100%;width: 100%;src="img/group_6.png"> 
</td> 
</tr> 
<tr> 
<td> 
        <img style="height: 100%;width: 100%;src="img/group_6.png"> 
</td> 
<td> 
        <img style="height: 100%;width: 100%;src="img/group_6.png"> 
</td> 
</tr> 

</div>

来源

2014-05-17 20:07:22 souvickcse

由于语义原因，它更好地创建以保持表格结构与div一样 - 表格只应用于表格数据。 –

如何把四个图像2x2放在其他图像上作为背景，CSS？

回答

相关问题