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

我想知道是否有一种简单的方法可以在多个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;

只是块，但无法弄清楚如何不在其他地方显示图像。谢谢！

4408

2017-09-12 15:29

起源

你还要在这里展示什么？在这个或盒子里面的任何其他东西？ - Robert Levy

使用 background-position。你根本不需要JS，只需要CSS。 - melancia

这不是你想要的吗？ jsfiddle.net/j08691/bzCNb/23 - j08691

只是要知道是否这样，因为它仍然需要一些工作： jsfiddle.net/bzCNb/26 - melancia

难道你不能只使用整个背景图像并在动态生成的div上放置白色边框吗？ - cimmanon

答案:

仅限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演示

2017-09-12 20:01

哦，哇谢谢！ - Brandon Knight

没问题。更新了答案和小提琴，以删除一些冗余的CSS属性。 - Boaz

但滚动页面时背景是固定的。就像使用CSS的其他解决方案一样。 - melancia

删除fixed属性会使其更好： jsfiddle.net/bzCNb/48 - melancia

@MelanciaUK谢谢。更新了小提琴以反映这一点。但是，由于它与动态创建单元格的问题甚至与OP中列出的要求无关，我不确定它是否值得-1。 - Boaz

我进入了几乎100％的东西。随意（任何人）编辑答案。

CSS

#blocks {
    width:100%;
    height:100px;
}
.block {
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}

jQuery（JS）

$(function () {
    var posX = 0;
    var posY = 0;
    var i = 0;

    $(".block").each(function (ind, el) {
        $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");

        posX += 20;
        i++;

        if (i == 4) {
            i = 0;
            posX = 0;
            posY += 25;
        }
    });
});

演示（待改进）： http://jsfiddle.net/bzCNb/33/

2017-09-12 18:18

是的，我在元素检查员中鬼混，并检查出来：小提琴：jsfiddle.net/bzCNb/31/ - Brandon Knight

我懂了。我认为这只是一个缺失的细节，但是在整天处理我自己的东西后，我现在无法发现任何其他东西。 - melancia

感谢所有的帮助，谢谢。 - Brandon Knight

别担心。我真的很喜欢这种挑战。大声笑 - melancia

我认为这是我现在可以得到的最好的：小提琴 - Brandon Knight

尝试将背景放在块上，而不是固定附件和左上顶部对齐的页面。不幸的是，如果页面滚动，则此选项显示为固定。

.block{
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
}

http://jsfiddle.net/bzCNb/28/

2017-09-12 17:49

是的，我真的不希望背景被修复。因为我不希望图像与页面一起滚动。 - Brandon Knight

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

答案:

看到 jsFiddle演示

热门问题

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