在多个div之间划分单个背景图像以创建“窗口化”影响？ [英] Way to divide a single background image across multiple divs to create "windowed" effect?

问题描述

我想知道是否有一个简单的方法来平铺或窗口跨多个div的单个背景图像。
我想创建一种打孔的窗口外观。

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

我有一个小提琴：链接到小提琴

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

这样的东西：

 < div id =blocks> 
< div class =blockstyle =background：some-section-of-image;>< / div> 
< div class =blockstyle =background：some-section-of-image2;>< / div> 
< div class =blockstyle =background：some-section-of-image3;>< / div> 
< div class =blockstyle =background：some-section-of-image4;>< / div> 
< / div> 
  

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

  opacity：0.0 ; 
  

，但无法弄清楚如何在其他地方不显示图片。感谢！

解决方案

仅限CSS解决方案

你所描述的基本上是一个有背景图像和白色边框的表。一个简单的解决方案可以通过创建一个只有CSS的表格布局来实现。

  #background -container {
 display：table; 
 width：100％; 
 border-collapse：collapse; 
 box-sizing：border-box; 
 / ** / 
 background：url（path-to-background-image）无重复中心; 
 background-size：cover; 
 / *供应商特定的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演示

I was wondering if there is an easy way to "tile" or "window" a single background image across multiple divs. I want to create a sort of punched out window look.

Keep in mind that I want to dynamically add these boxes. There will be a maximum of 16, but I could have 9.

I have a fiddle here: link to fiddle

What I want to do is instead of the background image showing, it would just be white.. And instead of the divs being white, they contain that section of the background image. Sorry if this is not a very good description, but basically I want to swap the white with the background.

so something like:

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

I'd like to do this with as little jQuery as possible... but maybe that is not feasible.

I fiddled around some with setting

opacity:0.0;

on just the blocks, but can't figure out how to not display the image elsewhere. Thanks!

解决方案

A CSS-only solution

What you are describing is basically a table with a background image and white borders. A simple solution can be achieved by creating a table-like layout with CSS only.

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

See jsFiddle Demo

这篇关于在多个div之间划分单个背景图像以创建“窗口化”影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！