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

问题描述

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

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

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

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

比如:

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

我想用尽可能少的 jQuery 来做这件事……但也许那不可行.

我摆弄了一些设置

不透明度:0.0；

仅在块上，但无法弄清楚如何不在其他地方显示图像.谢谢！

解决方案

仅使用 CSS 的解决方案

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

#background-container {显示:表；宽度:100%；边框折叠:折叠；box-sizing:border-box;/**/背景: url(path-to-background-image) 无重复中心；背景尺寸:封面；/* 供应商特定的黑客 */-webkit-background-size: 封面；-moz-background-size: 封面；-o-background-size: 封面；}.blocks {显示:表格行；}.堵塞 {显示:表格单元格；高度:100px；边框:10px 实心 #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屋！