在多个div之间划分单个背景图像以创建"窗口"效果的方法？

Question

我想知道是否有一种简单的方法可以在多个div中"平铺"或"窗口"单个背景图像.我想创建一种打孔的窗口外观.

请记住,我想动态添加这些框.最多可以有16个,但我可以有9个.

我这里有一个小提琴:链接到小提琴

我想要做的是代替显示的背景图像,它只是白色..而不是div是白色的,它们包含背景图像的那一部分.对不起,如果这不是一个很好的描述,但基本上我想把白色与背景交换.

像这样的东西:

<div id="blocks">
  <div class="block" style=" background: some-section-of-image ;"></div>
  <div class="block" style=" background: some-section-of-image2;"></div>
  <div class="block" style=" background: some-section-of-image3;"></div>
  <div class="block" style=" background: some-section-of-image4;"></div>
</div>

我想用尽可能少的jQuery做到这一点......但也许这是不可行的.

我摆弄着一些环境

opacity:0.0;

只是块,但无法弄清楚如何不在其他地方显示图像.谢谢!

Answer 1

仅限CSS的解决方案

你所描述的基本上是一张带有背景图片和白色边框的桌子.通过仅使用CSS创建类似于表的布局,可以实现简单的解决方案.

#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
     /**/
    background: url(path-to-background-image) no-repeat center center;
    background-size: cover;
     /* Vendor specific hacks */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.blocks {
    display:table-row;
}

.block {
    display:table-cell;
    height:100px;
    border:10px solid #FFF;
}

请参阅jsFiddle演示